CSS+DIV 实现个人网页简单样板

实现如图：

HTML：

<!DOCTYPE html><html>
<head><meta charset="utf-8"><meta name="keywords" content="博客实战"><meta name="description" content="htmlcss实战"><meta name="autor" content="twilight"><title>罗毅峰的作业</title><link rel="stylesheet" type="text/css" href="css.css"/>
</head><body>
<!--头部-->
<div id="header"><div class="logo_title"><h3>LinuxCast.net Demo Site</h3><p>LinuxCast.net演示页面，Linux学习不再晦涩难懂</p></div><div class="navi"><ul><li><a href="">首页</a></li><li><a href="">闲言碎语</a></li><li><a href="">我是谁</a></li></ul></div><div class="clear"></div></div><!--中部-->
<div id="wrapper"><div class="main"><div class="item"><div class="item_img"><img src="素材/1.png" alt="image"/></div><div class="item_content"><h3>示例标题示例标题</h3><p class="item_info">作者:twilight 日期：2017-2-2</p><p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p></div></div><div class="item"><div class="item_img"><img src="素材/1.png" alt="image"/></div><div class="item_content"><h3>示例标题示例标题</h3><p class="item_info">作者:twilight 日期：2017-2-2</p><p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p></div></div><div class="item"><div class="item_img"><img src="素材/1.png" alt="image"/></div><div class="item_content"><h3>示例标题示例标题</h3><p class="item_info">作者:twilight 日期：2017-2-2</p><p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p></div></div><div class="item"><div class="item_img"><img src="素材/1.png" alt="image"/></div><div class="item_content"><h3>示例标题示例标题</h3><p class="item_info">作者:twilight 日期：2017-2-2</p><p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p></div></div><div class="item"><div class="item_img"><img src="素材/1.png" alt="image"/></div><div class="item_content"><h3>示例标题示例标题</h3><p class="item_info">作者:twilight 日期：2017-2-2</p><p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p></div></div><div class="item"><div class="item_img"><img src="素材/1.png" alt="image"/></div><div class="item_content"><h3>示例标题示例标题</h3><p class="item_info">作者:twilight 日期：2017-2-2</p><p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p></div></div></div><div class="sidebar"><div class="author"><div class="author_img"><img src="3.jpg"/></div><div class="author_info"><h4>twilight</p><p>cease to struggle and you cease to live</p></div></div><div class="article"><h3>推荐文章</h3><ul><li>推荐文章1</li><li>推荐文章2</li><li>推荐文章3</li><li>推荐文章4</li><li>推荐文章5</li><li>推荐文章6</li></ul></div><div class="site_info"><p>访客100</p><p>文章数100</p></div></div><div class="clear"></div></div><!--尾部-->
<div id="footer"><div class="left">Copyright © 1999-2016, balalalalal, All Rights Reserved</div><div class="right"><ul><li>关于我们</li><li>联系我们</li><li>使用条款</li><li>意见反馈</li></ul></div>
</div>
</body>
</html>

CSS：

body{background-image:url("2.jpg");
}/*-------------头部-------------*/
#header{width:960px;color:gray;border-bottom:dashed 1px white;margin:0 auto;margin-bottom:10px;
}.logo_title{float:left;
}.logo_title h3{font-size:30px;margin-top:14px;
}
.logo_title p{font-size:20px;
}/*---------------------------------*/
.navi{float:right;margin:0 auto;margin-top:66px;color: red;
}
.navi a{color:grey;text-decoration:none;
}.navi ul {list-style:none;
}
.navi ul li{display:inline;margin-right:8px;border:1px solid grey;padding:4px 8px;border-radius:6px;
}
.clear{clear:both;
}/*----------------主体-----------------*/
#wrapper{width:960px;margin:0 auto;margin-bottom:15px;
}
.main{width:610px;background-color:white;border-radius:8px;float:left;padding:20px;
}
.item_img{float:left;margin:10px;margin-top:4px;
}
.item_img img{width:80px;height:80px;
}
.item_content{margin-left:100px;
}.item_content h3{font-size:22px;color:#a5612d;margin:0;
}
.item_info{font-size:12px;font-style:italic;margin:0;color:#999;
}
.item_desc{font-size:14px;margin:0;color:gray;margin-top:10px;padding-left:5px;border-left:solid 1px #999;
}.item{border-bottom:dashed 1px #999;padding :20px;
}
.sidebar{width:300px;background-color:white;border-radius:8px;float:right;padding-top:10px;
}.author_img img{width:120px;height:120px;border-radius:10px;
}.author_img{width:120px;height:120px;margin: 0 auto;}.author_info{margin: 10px 10px;padding:0;border:solid #ddd 1px;border-radius:8px;background-color:#eee;}.author_info h4{margin:0;padding:0;text-align:center;font-weight:bold;
}.article h3{font-style:italic;margin-left:10px;border-bottom:dashed 1px #aaa;padding-bottom:4px;
}.article ul {list-style:none;padding:0;margin-left:40px;
}.site_info{border-top :dashed 1px #aaa;
}
.site_info p {text-align:center;font-size:12px;color:gray;
}/*---------------尾部-----------------*/
#footer{width:960px;height:100px;margin:0 auto;background-color:blue;border-top:dashed white 1px;
}#footer .left{color:grey;float:left;margin-top:10px;
}#footer .right{color:grey;float:right;font-size:14px;}#footer .right ul {margin-top:10px;list-style:none;
}#footer .right ul li {display:inline-block;margin-right:5px;
}

CSS+DIV 实现个人网页简单样板相关推荐

CSS+DIV下的网页设计实例
CSS+DIV下的网页设计实例网页布局实例 ·CSS+DIV设计实例:实现让多个DIV排列时居中 ·合理使用HTML标签进行CSS布局 ·CSS布局中最小高度(min-height)的妙用 ·使用 ...
css+div+position 实现网页的基本布局（综合应用篇，包含轮播，二级菜单，等html相关知识点）
sunny运用所学的html基础知识,完成了两个网页的布局
HTML+CSS静态页面网页设计作业——布偶猫(7页)带留言板大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:布偶猫网站设计--布偶猫(7页)带留言板大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载常见网页设计作业题材有个人. 美食. ...
html css 网页代码案例,案例1-HTML使用css+div设计简单网页（62页）-原创力文档
至此就完成了"About"网页的制作,依此类推,修改html中body的类为services/portfolio/contact制作相应html文件并分别保存.在css文件中添加各 ...
黑客内参告诉你一个：设计师用div+css 必须知道的网页布局类型
今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧! 碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打 ...
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...
HTML5期末大作业：体育篮球网站设计——篮球活动(9页) HTML+CSS+JavaScript 校园篮球网页作业成品学校篮球网页制作模板学生简单体育运动网站设计成品
HTML5期末大作业:体育篮球网站设计--篮球活动(9页) HTML+CSS+JavaScript 校园篮球网页作业成品学校篮球网页制作模板学生简单体育运动网站设计成品常见网页设计作业题材有个 ...
html div将页面划分,css+div网页布局
div+css排版是最新的网页排版理念,完全有别旧的排版方式(比如说table排版).首先在页面整体上进行div标签划分内容区域,然后再用css进行定位,最后再对相应的区域添加内容.div+css这种 ...
HTML5期末大作业：网购网站设计——品优购(4页) HTML+CSS+JavaScript 大学生网购网页设计模板代码学生简单购物网站设计成品
HTML5期末大作业:网购网站设计--品优购(4页) HTML+CSS+JavaScript 大学生网购网页设计模板代码学生简单购物网站设计成品常见网页设计作业题材有个人. 美食. 公司. 学校 ...

CSS+DIV 实现个人网页简单样板

实现如图：

CSS+DIV 实现个人网页简单样板相关推荐

最新文章

热门文章