如何在单个页面中为课堂制作CSS？ [英] How to make css for class in single page?
本文介绍了如何在单个页面中为课堂制作CSS？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的风格：
Here is my style:
<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>
我想要控制
And I want to control
ul li {
list-style:none;
margin-bottom:25px;
}
没有改变我的预设页面。 margin-bottom 必须为0px
并且这里是我的ul li
without making change for my default page. margin-bottom must be 0px And here is my 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>
是否可以通过给定的类将ul-margin改为margin：bottom？我已阅读参考
Is it possible to change margin-bottom:0px through given class to ul li ? I've read the reference css style change just for one page but I don't know how to implement its code. That's why I ask a question for this. Here is the page while margin-bottom:0px
这是网页margin-bottom：25px
Here is the page while margin-bottom:25px
我想用margin-bottom：25px修复图片，但我不想完全改变页面。
这里有我的脚本页面：
I want to fix the picture with margin-bottom:25px but I don't want to change totally of the page. Here's full of my script page:
<!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>
推荐答案
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;
}
Hope I understood your question correctly. You want to change the ul > li class to margin-bottom: 25px; but only for the given page. Then this should work.
Hope I understood your question correctly. You want to change the ul > li class to margin-bottom: 25px; but only for the given page. Then this should work.
这篇关于如何在单个页面中为课堂制作CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
