masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Reka bentuk halaman butiran blog pembangunan HTML (3)

Tajuk ulasan

<p class="pl-p"><img src="https://img.php.cn/upload/course/000/000/004/5818330b1305a607.png">评论</p>

Tambahkan tajuk pada ulasan dan kawal gaya cssnya 

.pl-p{
    width: 1000px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 20px;
    padding-left: 20px;
}

Kesannya adalah seperti berikut:

QQ截图20161101164032.png

Isi lajur komen

Buat kotak div baharu

<div id="pl-div">
    <div id="pl-left"><img src="https://img.php.cn/upload/course/000/000/004/58170f99f2430105.png"><br>网友
    </div>
    <div id="pl-right">
        <textarea class="pl-txt "cols="90" rows="5" placeholder="发表评论" ></textarea>
        <input class="pl-input1" type="text" placeholder="昵称">
        <input  class="pl-input2" type="submit" value="发布评论" >
    </div>
</div>

Kawal gaya padanya

#pl-div{
    width: 920px;
    padding: 40px;
    background-color: white;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 30px;
}
#pl-left{
    float: left;
    width: 100px;
    overflow: hidden;
    text-align: center;
}
#pl-right{
    float: left;
    margin-left: 30px;
    width: 700px;
    overflow: hidden;
}
.pl-txt{
    border: 1px solid #777777;padding: 20px
}
.pl-input1{
    border: 1px solid #777777;width: 150px;height:30px;margin-top: 30px
;
}
.pl-input2{
    background-color: #65b5ff;color: white;width: 110px;height: 40px;margin-left: 580px
}

Kesannya seperti yang ditunjukkan dalam gambar

QQ截图20161101164705.png

Dengan cara ini, halaman kami mempunyai pada asasnya menyiapkan pembinaan blog ringkas kami.

Kes ini hanyalah pembinaan blog yang mudah, dan masih terdapat banyak fungsi yang tidak sempurna, seperti pengesahan laman web, saling melompat antara pautan, menambah bar sisi, dan kotak terapung Anda boleh menambah dan mencantikkan gaya navigasi, dsb. Anda boleh berlatih sendiri untuk melengkapkan pengindahan halaman.

Meneruskan pembelajaran
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>新闻内容</title> <style> body{ background-color: #F0F0F0; } *{ border: 0px; padding: 0px; margin: 0px; font-size: 14px; } a:hover{color:red;text-decoration:none;} #top{ width: 100%; height: 90px; background-color: white; border-bottom: 1px solid #bbbbbb; } #menu{ width: 1000px; overflow: hidden; margin: 0 auto; } #menu img{ height: 90px; } #menu ul{ list-style-type: none; } #menu ul li{ float: left; height: 90px; line-height: 90px; margin-right: 50px; } #menu ul li a{ color: black;text-decoration: none; display: inline-block; } #menu ul li a:hover{color: #65b5ff;text-decoration: none} #box{ width: 900px; height: 370px; background-color: white; margin: 0 auto; margin-top: 50px; padding: 50px; } #box p{ text-align: center; } #box-form{ text-align: center; } .p_line{ border-bottom: 1px solid #bbbbbb; height: 40px; line-height: 50px; } .txtBox{ border: 1px solid #bbbbbb; width: 350px; margin-top: 30px; height: 50px; padding-left: 10px; border-radius: 5px; } .btn { width: 365px; height: 50px;; color: white; background-color: #DD0000; margin-top: 25px; } #bottom{ width:100%; background-color:#323333; height:300px; margin-top:70px; } #bottom-content{ width:1000px; overflow:hidden; margin:0 auto; color:white; height:280px; } #content-left{ width:460px; float:left; height:280px; } #bottom-content p{ margin-top:10px; } #content-right{ width:460px; float:right; height:280px; text-align: center; margin-top: 40px; } .color{ color: #323333; } #blog{ width: 1000px; overflow: hidden; margin: 0 auto; margin-top: 20px; } #blog ul{ list-style-type: none; } #blog ul li{ background-color: white; padding: 20px; width: 100%; overflow: hidden; margin-top: 15px; } .blog-left{ float: left; width: 680px; overflow: hidden; } .blog-right{ float: left; margin-left: 10px; width: 280px; overflow: hidden; } .blog-right img{ width: 280px; height: 200px; } .title{ text-decoration:none; font-size: 26px; } .blog-left p{ color: gray; } .blog-left img{ width: 20px; margin-right: 10px; vertical-align: middle; } .page{ height: 40px; margin-top: 10px; text-align: center; padding-top: 20px; } .page a{ border: 1px solid #71b0bb; text-decoration: none; margin: 5px; padding: 5px 10px; } .page a:link,.page a:visited{ color: #000000; } .page a:hover,.page a:active{ color: #FFF; background-color: #bbac5c; } .mi{ padding-left: 90px; } #blog-content{ width: 940px; overflow: hidden; padding: 30px; background-color: white; margin: 0 auto; border-top: 2px solid #e2b709; margin-top: 30px; } .siztitle{ font-size: 28px; text-align: center; } #blog-content p{ color: black; } #blog-content img{ width: 20px; margin-right: 10px; vertical-align: middle; } .rev{ border-left: 2px solid #e2b709; width: 100%; overflow: hidden; margin-top: 20px; padding-left: 10px; } .content{ margin-top: 20px; line-height: 28px; } .pl-p{ width: 1000px; overflow: hidden; margin: 0 auto; margin-top: 20px; font-size: 20px; padding-left: 20px; } #pl-div{ width: 920px; padding: 40px; background-color: white; overflow: hidden; margin: 0 auto; margin-top: 30px; } #pl-left{ float: left; width: 100px; overflow: hidden; text-align: center; } #pl-right{ float: left; margin-left: 30px; width: 700px; overflow: hidden; } .pl-txt{ border: 1px solid #777777;padding: 20px } .pl-input1{ border: 1px solid #777777;width: 150px;height:30px;margin-top: 30px ; } .pl-input2{ background-color: #65b5ff;color: white;width: 110px;height: 40px;margin-left: 580px } </style> </head> <body> <div id="top"> <div id="menu"> <ul> <li><img src=https://img.php.cn/upload/course/000/000/004/58171021ac1f3460.png></li> <li><a href=""> 首页</a></li> <li><a href="">科技资讯</a></li> <li><a href="">心情随笔</a></li> <li><a href="">资源收藏</a></li> <li><a href="">图文图片</a></li> <li><a href="">留言板</a></li> <li class="mi" ><a href="">登陆</a>/<a href="">注册</a></li> </ul> </div> </div> <div id="blog-content"> <p class="siztitle">测试标题测试标题测试标题测试标题测试标题</p> <p style="margin-top: 50px;color: gray" ><img src="https://img.php.cn/upload/course/000/000/004/58170f99f2430105.png" >测试<img src="https://img.php.cn/upload/course/000/000/004/58170fbda3f34844.png" style="margin-left: 20px">2016/10/31</p> <p class="rev"style="color:gray;">简介</p> <p class="content">测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p> </div> <p class="pl-p"><img src="https://img.php.cn/upload/course/000/000/004/5818330b1305a607.png">评论</p> <div id="pl-div"> <div id="pl-left"><img src="https://img.php.cn/upload/course/000/000/004/58170f99f2430105.png"><br>网友 </div> <div id="pl-right"> <textarea class="pl-txt "cols="90" rows="5" placeholder="发表评论" ></textarea> <input class="pl-input1" type="text" placeholder="昵称"> <input class="pl-input2" type="submit" value="发布评论" > </div> </div> <div id="bottom"> <div id="bottom-content"> <div id="content-left"> <p><img src="https://img.php.cn/upload/course/000/000/004/58170ff175fc3142.jpg" height="150px"></p> <p> 网站位置 | 关于我们 | 意见反馈 | </p> </div> <div id="content-right"> <p>友情链接</p> <p>PHP中文网 | 小猪CMS</p> <p>公司网址：php.cn</p> </div> </div> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya tiada
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492784 permainan