这片文章主要是介绍通过html和css模仿编写的一个简单的博客网页，感兴趣的朋友参考下。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>myBlog</title>
<style>
body{
margin:0;
padding:0;
}
#container{
width:1349px;
height:1500px;
background-color:#eee;
}
#header{
background-color:white;
height:50px;
width:1349px;
}
#header .title li{
height:50px;
line-height:50px;
font-size:15px;
margin-left:20px;
margin-right:10px;
list-style-type:none;
float:left;
}
.title li a:link{
color:black;
text-decoration:none;
}
.title li a:hover{
color:red;
}
#header .subtitle li {
line-height:50px;
float:left;
list-style-type:none;
font-size:15px;
margin-right:10px;
color:black;
}
.subtitle li a:link{
color:black;
text-decoration:none;
}
.subtitle li a:hover{
color:red;
}
#main{
width:1349px;
height:1500px;
background-image:url(./images/bkg.jpg);
}
#main h{
margin:50px 900px 50px 80px;
font-size:40px;
font-weight:700px;
float:left;
}
#main .mana li {
float:left;
margin-right:20px;
margin-top:40px;
list-style-type:none;
font-size:15px;
color:white;
}
.mana li a{
border:1px solid white;
padding:2px;
color:white;
text-decoration:none;
}
.mana a:hover{
background:red;
color:white;
}
#lside{
width:800px;
height:700px;
background:white;
margin:0px 50px 50px 80px;
padding:5px;
float:left;
}
#rside{
width:300px;
height:1000px;
background:white;
float:left;
}
#state h{
margin:20px 400px 20px 15px;
color:#999;
font-size:18px;
border:1px solid gray;
padding:2px;
font-family:'PingFang SC','Microsoft YaHei',SimHei,Arial,SimSun;
}
#state img{
margin:20px 20px 10px 15px;
}
#artitlrtitle h{
font-size:20px;
font-weight:700px;
margin:10px 200px 10px 15px;
float:left;
clear:both;
}
#content p{
font-size:10px;
margin:5px 15px;
clear:both;
color:#999;
}
#time h{
margin:3px 10px 5px 15px;
font-size:15px;
float:left;
color:#999;
}
#time .oth{
margin:3px 10px 5px 15px;
font-size:15px;
float:left;
color:#999;
}
#head img{
margin:15px;
}
#head p{
float:left;
font-size:20px;
margin:30px 10px;
font-weight:700px;
color:#999;
font-weight:600px;
}
#four .yuan{
font-size:16px;
font-weight:700px;
margin:5px 10px 10px 40px;
color:gray;
float:left;
}
#four .num1{
font-size:14px;
font-weight:700px;
margin:5px 6px 20px 51px;
color:#999;
}
#four .num2{
font-size:14px;
font-weight:700px;
margin:5px 7px 20px 50px;
color:#999;
}
#four .num3{
font-size:14px;
font-weight:700px;
margin:5px 7px 20px 46px;
color:#999;
}
#four .num4{
font-size:14px;
font-weight:700px;
margin:5px 7px 20px 29px;
color:#999;
}
#intro{
height:260px;
width:300px;
margin-top:10px;
}
#intro .ff{
font-size:10px;
margin:5px 20px;
clear:both;
}
#fenlei h{
font-size:15px;
font-weight:700px;
float:left;
margin:10px 20px;
font-weight:700px;
}
#fenlei p .ti1 {
float:left;
clear:left;
font-size:10px;
margin:5px 20px;
color:gray;
text-decoration:none;
}
#fenlei p .ti1:hover{
color:red;
}
#fenlei .tii1{
float:right;
clear:right;
font-size:8px;
margin:5px 20px;
color:#bbb;
}
#cundang h{
font-size:15px;
font-weight:700px;
float:left;
clear:left;
margin:20px 20px;
}
#cundang p .ti1{
float:left;
clear:left;
font-size:10px;
margin:5px 20px;
color:gray;
text-decoration:none;
}
#cundang p .ti1:hover{
color:red;
}
#cundang .tii1{
float:right;
clear:right;
font-size:8px;
margin:5px 20px;
color:#bbb;
}
#paiming h{
font-size:15px;
font-weight:700px;
float:left;
clear:left;
margin:20px 20px;
font-weight:700px;
}
#pm .tiname{
float:left;
clear:left;
font-size:15px;
margin:5px 20px;
color:gray;
text-decoration:none;
}
#pm .tiname:hover{
color:red;
}
#pm .tinum{
float:left;
clear:left;
font-size:8px;
margin:3px 20px;
color:#bbb;
}
#callus h{
font-size:15px;
font-weight:700px;
float:left;
clear:left;
margin:20px 20px;
font-weight:700px;
}
#callus .us{
font-size:10px;
margin:5px 2px 5px 20px;
float:left;
clear:left;
}
#callus .weibo{
font-size:10px;
margin:5px 5px;
padding-right:80px;
float:right;
clear:right;
}
#callus .us1{
font-size:10px;
margin:5px 20px;
float:left;
clear:left;
}
#callus .oo1{
margin:40px 80px 10px 80px;
font-size:10px;
float:left;
clear:left;
}
#callus .oo2{
margin:10px 80px 10px 80px;
font-size:10px;
float:left;
clear:left;
}
</style>
<!-- <link rel = "stylesheet" type = "text/css" href = "blog.css"> -->
</head>
<body>
<div id = "container">
<div id = "header">
<div id = "firstpic" >
<img a href = "" src = "./images/csdn.jpg" alt = "" width="80" height="50" style="float:left"></a>
</div>
<div id = "menu">
<ul class = "title" >
<li><a href = "#" >博客</a></li>
<li><a href = "#" >学院</a></li>
<li><a href = "#" >下载</a></li>
<li><a href = "#" >GitChat</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><a href = "#" >码云</a></li>
<li><a href = "#" style = "margin-right:150px">ITeye</a></li>
</ul>
</div>
<div id = "secondpic" >
<img id = "search" src = "./images/search.jpg" alt = "" height="40" width = "200" style="float:left" >
</div>
<div id = "other">
<ul class = "subtitle" >
<li><a href = "#" style="margin-left:23px">写博客</a></li>
<li><a href = "#" style="margin-left:23px">发Chat</a></li>
</ul>
</div>
<div id = "thirdpic">
<img a href = "" src = "./images/c.gif" alt = "" width = "50" height = "50" style="float:left"></a>
</div>
</div>
<div id = "main">
<h>我的博客</h>
<ul class = "mana">
<li><a href = " " >修改个人资料</a></li>
<li><a href = " " >管理博客</a></li>
</ul>
<div id = "lside">
<div id = "state">
<h>只看原创</h>
<div id = "fourthpic">
<img src = "./images/search.jpg" alt = "" >
</div>
</div>
<div id = "artitlrtitle">
<h > listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
<div id = "artitlrtitle">
<h>listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
<div id = "artitlrtitle">
<h>listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
<div id = "artitlrtitle">
<h>listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
<div id = "artitlrtitle">
<h>listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
</div>
<div id = "rside">
<div id = "head">
<img a href = "" src = "./images/c.gif" alt = "" width = "50" height = "50" style="float:left"></a>
<p>XXX</p>
<div id = "four">
<p class = "yuan" style="word-spacing:22px;text-indent:6px;">原创 粉丝 喜欢 码云 </p>
<p class = "num1" > 8 </p>
<p class = "num2" > 8 </p>
<p class = "num3" > 8 </p>
<p class = "num4"> 未开通 </p>
</div>
</div>
<div id = "intro">
<p class = "ff" >访问量： 1000 </p>
<p class = "ff" >等级： 2 </p>
<p class = "ff" >排名： 10000 </p>
<p class = "ff" >勋章： 恒 </p>
</div>
<div id = "fenlei">
<h>文章分类 </h>
<p><a class = "ti1" href = "#" > Android</a></p>
<p class = "tii1">8篇</p>
<p><a class = "ti1" href = "#" > CSS </a></p>
<p class = "tii1">8篇</p>
<p><a class = "ti1" href = "#" > JAVA </a></p>
<p class = "tii1">8篇</p>
</div>
<div id = "cundang">
<h>文章存档 </h>
<p><a class = "ti1" href = "#" > 2017年10月</a></p>
<p class = "tii1">2篇</p>
<p><a class = "ti1" href = "#" > 2018年01月 </a></p>
<p class = "tii1">2篇</p>
<p><a class = "ti1" href = "#" > 2019年03月 </a></p>
<p class = "tii1">6篇</p>
</div>
<div id = "paiming">
<h>阅读排名</h>
<div id = "pm">
<p><a class = "tiname" href = "#">css链接</a></p>
<p class = "tinum">阅读量：200</p>
</div>
<div id = "pm">
<p><a class = "tiname" href = "#">css链接</a></p>
<p class = "tinum">阅读量：200</p>
</div>
<div id = "pm">
<p><a class = "tiname" href = "#">css链接</a></p>
<p class = "tinum">阅读量：200</p>
</div>
</div>
<div id = "callus">
<h>联系我们</h>
<p class = "us">网站客服</p>
<p class = "weibo"> 微博客服</p>
<p class = "us1"> www.php.cn</p>
<p class = "us1">400-100-200</p>
<p class = "oo1">京ICP证00000000号</p>
<p class = "oo2">关于|招聘|广告服务</p>
</div>
</div>
</div>
</div>
</body>
</html>相关推荐：
以上是实战之仿博客网页的详细内容。更多信息请关注PHP中文网其他相关文章！
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AMHTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。
HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AMHTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。
HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AMHTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。
HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AMHTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。
HTML：建立网页的结构Apr 14, 2025 am 12:14 AMHTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。
从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AMHTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。
了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AMWebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AMHTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
3 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前ByDDD
威尔R.E.P.O.有交叉游戏吗？
1 个月前By尊渡假赌尊渡假赌尊渡假赌
热工具
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
Dreamweaver CS6
视觉化网页开发工具
WebStorm Mac版
好用的JavaScript开发工具
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
记事本++7.3.1
好用且免费的代码编辑器
