如何在单页中为班级制作CSS？
这是我的风格：
<style>
ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
ul li {
list-style:none;
margin-bottom:25px;
}
ul li img {
cursor: pointer;
}
.modal-body {
padding:5px !important;
}
.modal-content {
border-radius:0;
}
.modal-dialog img {
text-align:center;
margin:0 auto;
}
.controls{
width:50px;
display:block;
font-size:11px;
padding-top:8px;
font-weight:bold;
}
.next {
float:right;
text-align:right;
}
/*override modal for demo only*/
.modal-dialog {
max-width:500px;
padding-top: 90px;
}
@media screen and (min-width: 768px){
.modal-dialog {
width:500px;
padding-top: 90px;
}
}
@media screen and (max-width:1500px){
#ads {
display:none;
}
}
.dock {
border: 4px dotted #cccccc;
background-color: #ededed;
width: 600px;
height: 300px;
color: #aaa;
font-size: 18px;
text-align: center;
padding-top: 100px;
}
.dock_hover {
border: 4px dotted #4d90fe;
background-color: #e7f0ff;
width: 600px;
height: 300px;
color: #4d90fe;
font-size: 18px;
text-align: center;
padding-top: 100px;
}
</style>
我想控制
ul li {
list-style:none;
margin-bottom:25px;
}
不对我的默认页面进行更改。 margin-bottom 必须为0px 这是我的ul li
<ul class="row">
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
</li>
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
</li>
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
</li>
</ul>
是否可以通过给定的类更改margin-bottom：0px到ul li？我已阅读参考资料css style change just for one page，但我不知道如何实施其代码。这就是我为什么问这个问题的原因。
这是页面，而margin-bottom：0px
这是页面，而margin-bottom：25px
我想用margin-bottom修复图片：25px但我不想完全改变页面。 这里充满了我的脚本页面：
<!DOCTYPE html>
<?php include('akses.php'); ?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Basarnas</title>
<!-- Bootstrap Core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style>
ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
ul li {
list-style:none;
margin-bottom:25px;
}
ul li img {
cursor: pointer;
}
.modal-body {
padding:5px !important;
}
.modal-content {
border-radius:0;
}
.modal-dialog img {
text-align:center;
margin:0 auto;
}
.controls{
width:50px;
display:block;
font-size:11px;
padding-top:8px;
font-weight:bold;
}
.next {
float:right;
text-align:right;
}
/*override modal for demo only*/
.modal-dialog {
max-width:500px;
padding-top: 90px;
}
@media screen and (min-width: 768px){
.modal-dialog {
width:500px;
padding-top: 90px;
}
}
@media screen and (max-width:1500px){
#ads {
display:none;
}
}
.dock {
border: 4px dotted #cccccc;
background-color: #ededed;
width: 600px;
height: 300px;
color: #aaa;
font-size: 18px;
text-align: center;
padding-top: 100px;
}
.dock_hover {
border: 4px dotted #4d90fe;
background-color: #e7f0ff;
width: 600px;
height: 300px;
color: #4d90fe;
font-size: 18px;
text-align: center;
padding-top: 100px;
}
</style>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Operator Komunikasi</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <?php echo $_SESSION['operatorkomunikasi']; ?> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="settings.php"><i class="fa fa-fw fa-gear"></i> Settings</a>
</li>
<li class="divider"></li>
<li>
<a href="../logout.php"><i class="fa fa-sign-out"></i> Log Out</a>
</li>
</ul>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<a href="index.php"><i class="fa fa-fw fa-home"></i> Home</a>
</li>
<li class="active">
<a href="data_informasi_bencana.php"><i class="fa fa-fw fa-clipboard"></i> Informasi Bencana</a>
</li>
<li>
<a href="monitoring_operasi_sar.php"><i class="fa fa-fw fa-desktop"></i> Monitoring Operasi SAR</a>
</li>
<li>
<hr width="107%"><font color="#ffffff"> Direktorat Operasi dan Latihan<br> BASARNAS</font><hr width="107%">
<img src="../gambar/logo.png"><hr width="107%">
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">
Data Informasi Bencana
</h2>
<ol class="breadcrumb">
<li>
<i class="fa fa-clipboard"></i> <a href="data_informasi_bencana.php"> List Informasi Bencana</a>
</li>
<li class="active">
<i class="fa fa-external-link"></i> Berita SAR
</li>
</ol>
</div>
</div>
<?php if (isset($_POST['submit'])) {
$key = md5('vxcygnusloiv');
function encrypt($string, $key){
$string = rtrim(base64_encode(mcrypt_encrypt(MCRYPT_RIJNDAEL_256, $key, $string, MCRYPT_MODE_ECB)));
return $string;
}
$conn = new Mongo();
$db = $conn->selectDB('basarnas');
$id = $_POST['id'];
$kategori = $_POST['kategoribencana'];
$kepalaoperasi = $_POST['kepalaoperasi'];
$kepalaoperasii = $_POST['kepalaoperasii'];
$query = $db->informasi_bencana;
$queryy = $db->user;
$queryyy = $db->pegawai;
if ($kategori == "Bencana Besar") {
$cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasi, $key), "level"=>encrypt("Kepala Kantor Pusat BASARNAS", $key)));
$nResults = $cursor->count();
if ($nResults == 0){
echo '<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="fa fa-times"></i> Berita SAR gagal dikirim karena tidak ada yang menjabat sebagai (Kepala '.$kepalaoperasi.').
</div>';
}else {
$cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasi, $key), "level"=>encrypt("Kepala Kantor Pusat BASARNAS", $key)));
foreach($cursor as $doc){
$selected = array('_id'=> new MongoId($doc['idpegawai']));
$cursorr=$queryyy->find($selected);
foreach($cursorr as $docc){
$nip_kepala = decrypt($docc['nip'], $key);
$nama_kepala = decrypt($docc['nama'], $key);
$query->update(array("_id"=>new MongoId($id)), array('$set'=>array("status"=>encrypt("berita", $key), "status_berita"=>encrypt("Pending Berita SAR", $key), "kategori"=>encrypt($kategori, $key), "smc"=>encrypt($kepalaoperasi, $key), "nip_kepala"=>encrypt($nip_kepala, $key), "nama_kepala"=>encrypt($nama_kepala, $key), "chat_pusat_daerah"=>encrypt("", $key), "status_chat_pusat"=>0, "status_chat_daerah"=>0)));
if ($query){
echo '<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="fa fa-check"></i> Berita SAR berhasil dikirim ke ('.$kepalaoperasi.').
</div>';
}else {
echo '<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="fa fa-times"></i> Berita SAR gagal dikirim ke ('.$kepalaoperasi.').
</div>';
}
}
}
}
} elseif ($kategori == "Bencana Kecil"){
$cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasii, $key), "level"=>encrypt("Kepala Kantor SAR Daerah", $key)));
$nResults = $cursor->count();
if ($nResults == 0){
echo '<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="fa fa-times"></i> Berita SAR gagal dikirim karena tidak ada yang menjabat sebagai (Kepala '.$kepalaoperasii.').
</div>';
}else {
$cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasii, $key), "level"=>encrypt("Kepala Kantor SAR Daerah", $key)));
foreach($cursor as $doc){
$selected = array('_id'=> new MongoId($doc['idpegawai']));
$cursorr=$queryyy->find($selected);
foreach($cursorr as $docc){
$nip_kepala = decrypt($docc['nip'], $key);
$nama_kepala = decrypt($docc['nama'], $key);
$query->update(array("_id"=>new MongoId($id)), array('$set'=>array("status"=>encrypt("berita", $key), "status_berita"=>encrypt("Pending Berita SAR", $key), "kategori"=>encrypt($kategori, $key), "smc"=>encrypt($kepalaoperasii, $key), "nip_kepala"=>encrypt($nip_kepala, $key), "nama_kepala"=>encrypt($nama_kepala, $key), "chat_pusat_daerah"=>encrypt("", $key), "status_chat_pusat"=>0, "status_chat_daerah"=>0)));
if ($query){
echo '<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="fa fa-check"></i> Berita SAR berhasil dikirim ke ('.$kepalaoperasii.').
</div>';
}else {
echo '<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="fa fa-times"></i> Berita SAR gagal dikirim ke ('.$kepalaoperasii.').
</div>';
}
}
}
}
} else {
echo '<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="fa fa-times"></i> Berita SAR gagal dikirim.
</div>';
}
}
$key = md5('vxcygnusloiv');
function decrypt($string, $key){
$string = rtrim(mcrypt_decrypt(MCRYPT_RIJNDAEL_256, $key, base64_decode($string), MCRYPT_MODE_ECB));
return $string;
}
$conn = new Mongo();
$db = $conn->selectDB('basarnas');
$query = $db->informasi_bencana;
$cursor=$query->find(array("_id"=>new MongoId($_GET['id'])));
foreach($cursor as $id=>$doc){
if (decrypt($doc['jenis_kejadian'], $key) == "" || decrypt($doc['lokasi_kejadian'], $key) == "" || decrypt($doc['no_telp_lain'], $key) == "" || decrypt($doc['catatan'], $key) == "") {
$status = "disabled";
}else{
$status = "";
}
?>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-file"></i> Form Pembuatan Berita SAR</h3>
</div>
<div class="panel-body">
<form class="form-signin" action="" method="post">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Waktu Kejadian:</label><input type="hidden" name="id" value="<?php echo $doc['_id']; ?>"/>
<input type="text" class="form-control" name="waktulaporan" value="<?php echo date('Y/m/d, H:i', $doc['waktu_laporan']->sec); ?>" disabled/>
</div>
<div class="form-group">
<label>Nama Pelapor:</label>
<input type="text" class="form-control" name="namapelapor" value="<?php echo decrypt($doc['nama_pelapor'], $key); ?>" disabled/>
</div>
<div class="form-group">
<label>No Telepon Pelapor:</label>
<input type="text" class="form-control" name="notelp" value="<?php echo decrypt($doc['no_telp'], $key); ?>" disabled/>
</div>
<div class="form-group">
<label>Jenis Kejadian:</label>
<input type="text" class="form-control" name="jeniskejadian" value="<?php echo decrypt($doc['jenis_kejadian'], $key); ?>" disabled/>
</div>
<div class="form-group">
<label>Lokasi Kejadian:</label>
<input type="text" class="form-control" name="lokasikejadian" value="<?php echo decrypt($doc['lokasi_kejadian'], $key); ?>" disabled/>
</div>
<div class="form-group">
<label>No Telepon Lain Yang Bisa Dihubungi:</label>
<input type="text" class="form-control" name="notelplain" value="<?php echo decrypt($doc['no_telp_lain'], $key); ?>" disabled/>
</div>
<div class="form-group">
<label>Catatan Tambahan: </label>
<textarea class="form-control" rows="3" name="catatan" disabled><?php echo decrypt($doc['catatan'], $key); ?></textarea>
</div>
<div class="form-group">
<label>Kategori Bencana:</label>
<select class="form-control" name="kategoribencana" onchange="kategori(this);" required>
<option value=""></option>
<option value="Bencana Besar">Bencana Besar</option>
<option value="Bencana Kecil">Bencana Kecil</option>
</select>
</div>
<div class="form-group" id="bencanabesar" style="display: none;"><input type="hidden" name="kepalaoperasi" value="Kantor Pusat BASARNAS"/>
<input type="text" class="form-control" value="Kantor Pusat BASARNAS" disabled/>
</div>
<div class="form-group" id="bencanakecil" style="display: none;">
<label>Pilih Kantor SAR:</label>
<select class="form-control" name="kepalaoperasii" required>
<option value="Kantor SAR Daerah Aceh">Kantor SAR Daerah Aceh</option>
<option value="Kantor SAR Daerah Medan">Kantor SAR Daerah Medan</option>
<option value="Kantor SAR Daerah Padang">Kantor SAR Daerah Padang</option>
<option value="Kantor SAR Daerah Pekanbaru">Kantor SAR Daerah Pekanbaru</option>
<option value="Kantor SAR Daerah Jambi">Kantor SAR Daerah Jambi</option>
<option value="Kantor SAR Daerah Tanjung Pinang">Kantor SAR Daerah Tanjung Pinang</option>
<option value="Kantor SAR Daerah Pangkal Pinang">Kantor SAR Daerah Pangkal Pinang</option>
<option value="Kantor SAR Daerah Bengkulu">Kantor SAR Daerah Bengkulu</option>
<option value="Kantor SAR Daerah Palembang">Kantor SAR Daerah Palembang</option>
<option value="Kantor SAR Daerah Lampung">Kantor SAR Daerah Lampung</option>
<option value="Kantor SAR Daerah Jakarta">Kantor SAR Daerah Jakarta</option>
<option value="Kantor SAR Daerah Bandung">Kantor SAR Daerah Bandung</option>
<option value="Kantor SAR Daerah Semarang">Kantor SAR Daerah Semarang</option>
<option value="Kantor SAR Daerah Surabaya">Kantor SAR Daerah Surabaya</option>
<option value="Kantor SAR Daerah Denpasar">Kantor SAR Daerah Denpasar</option>
<option value="Kantor SAR Daerah Mataram">Kantor SAR Daerah Mataram</option>
<option value="Kantor SAR Daerah Kupang">Kantor SAR Daerah Kupang</option>
<option value="Kantor SAR Daerah Banjarmasin">Kantor SAR Daerah Banjarmasin</option>
<option value="Kantor SAR Daerah Balikpapan">Kantor SAR Daerah Balikpapan</option>
<option value="Kantor SAR Daerah Merauke">Kantor SAR Daerah Merauke</option>
<option value="Kantor SAR Daerah Pontianak">Kantor SAR Daerah Pontianak</option>
<option value="Kantor SAR Daerah Palu">Kantor SAR Daerah Palu</option>
<option value="Kantor SAR Daerah Makassar">Kantor SAR Daerah Makassar</option>
<option value="Kantor SAR Daerah Kendari">Kantor SAR Daerah Kendari</option>
<option value="Kantor SAR Daerah Ternate">Kantor SAR Daerah Ternate</option>
<option value="Kantor SAR Daerah Ambon">Kantor SAR Daerah Ambon</option>
<option value="Kantor SAR Daerah Jayapura">Kantor SAR Daerah Jayapura</option>
<option value="Kantor SAR Daerah Sorong">Kantor SAR Daerah Sorong</option>
<option value="Kantor SAR Daerah Biak">Kantor SAR Daerah Biak</option>
<option value="Kantor SAR Daerah Timika">Kantor SAR Daerah Timika</option>
<option value="Kantor SAR Daerah Manokwari">Kantor SAR Daerah Manokwari</option>
<option value="Kantor SAR Daerah Merauke">Kantor SAR Daerah Merauke</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="container">
<div class="col-md-7">
<div class="row" style="text-align:center; border-bottom:1px dashed #ccc; padding:0 0 20px 0; margin-bottom:40px;">
<h3 style="font-family:arial; font-weight:bold; font-size:30px;">
Upload Dokumen Foto Pendukung
</h3>
</div>
<ul class="row">
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
</li>
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
</li>
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
</li>
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
</li>
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
</li>
</ul>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>
</div>
<div id="result"></div>
<div align="center">
<div id="dock" class="dock">Drag & Drop Photos Here</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
<div class="text-right">
<button class="btn btn-primary" name="submit" <?php echo $status;?>>Kirim Berita <i class="fa fa-share-square-o"></i></button>
</div>
</form>
<br>
<?php } ?>
<div class="well">
<h4><i class="fa fa-info-circle"></i> Informasi Pengiriman Berita SAR</h4>
<p align="justify">Jika tombol (<b>Kirim Berita</b>) dalam keadaan <b>"disabled"</b> maka pastikan untuk mengisi semua kolom data informasi bencana secara lengkap. Karena syarat untuk pengiriman berita SAR diharuskan untuk mengisi
form secara lengkap meskipun pada catatan tambahan tidak ada yang perlu untuk diisi tetapi usahakan untuk mengisinya seperti <b>"Tidak ada"</b>. Untuk mengisi kolom data informasi bencana yang belum diisi dapat menuju link ini <?php echo "<a href='form_edit_info_bencana.php?id=".$id."'>" ?>Edit Informasi Bencana</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../js/bootstrap.min.js"></script>
<script src="../js/photo-gallery.js"></script>
<script type="text/javascript" src="script/tuto-dd-upload-image.js"></script>
<script>
function kategori(that) {
if (that.value == "Bencana Besar") {
document.getElementById("bencanabesar").style.display = "block";
document.getElementById("bencanakecil").style.display = "none";
} else if (that.value == "Bencana Kecil") {
document.getElementById("bencanakecil").style.display = "block";
document.getElementById("bencanabesar").style.display = "none";
} else {
document.getElementById("bencanakecil").style.display = "none";
document.getElementById("bencanabesar").style.display = "none";
}
}
</script>
</body>
</html>
3 个答案:
答案 0 :(得分：1)
如果你在页面中观察到，body类会为页面抛出一个唯一的类。
将身体类作为 ul li 的参考，您将为margin-bottom:0,设置样式
至于例如;
<body class="page-class">
您可以根据自己的愿望获取身体的页面类别并设置样式。
.page-class ul li{
margin-bottom:0;
}
答案 1 :(得分：1)
HTML：
<ul id="pageID" class="row">
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
</li>
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
</li>
<li class="col-lg-3 col-md-3 ">
<img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
</li>
</ul>
CSS：
#pageID li {
list-style:none;
margin-bottom:25px;
}
希望我能正确理解你的问题。你想改变ul＆gt;李级至保证金底部：25px;但仅适用于给定的页面。那应该可行。
答案 2 :(得分：-7)
如果您只想在一个子页面上更改它，您必须在任何父元素的某处添加一个类或ID，并从那里写下您的选择器。
然后会有一页
<body class="foo">
和css可能是
body.foo ul.row{
font-size: 1em;
}
body.foo ul.row li{
list-style-type: none;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？