1、html代码：
<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>Title</title><linkrel="stylesheet"href="blog.css"></head><body><!--左边开始--><divclass="left"><divclass="head-img"><imgsrc="https://q1mi.github.io/Blog/asset/img/head_img.jpg"alt=""></div><!--blog标题--><h3class="blog-name">我的blog</h3><!--介绍信息--><divclass="introduce"><p>这个人很懒，什么都没有留下。</p></div><!--博客连接无序列表开始--><ulclass="blog-links"><li><ahref="">关于我</a></li><li><ahref="">微信公众号</a></li><li><ahref="">微博</a></li></ul><!--博客连接结束--><!--博客的标签开始--><ulclass="blog-tags"><li><ahref="">HTML</a></li><li><ahref="">CSS</a></li><li><ahref="">JavaScript</a></li></ul><!--博客的标签结束--></div><!--左边结束--><!--右边开始--><divclass="right"><!--w文章列表开始--><divclass="article-list"><!--文章开始--><divclass="article"><divclass="head"><h1class="article-title">海燕</h1><spanclass="article-date">2018-03-10</span></div><divclass="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><divclass="tag-list"><span>HTML</span><span>CSS</span></div></div><!--文章结束--><!--文章开始--><divclass="article"><divclass="head"><h1class="article-title">海燕</h1><spanclass="article-date">2018-03-10</span></div><divclass="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><divclass="tag-list"><span>HTML</span><span>CSS</span></div></div><!--文章结束--><!--文章开始--><divclass="article"><divclass="head"><h1class="article-title">海燕</h1><spanclass="article-date">2018-03-10</span></div><divclass="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><divclass="tag-list"><span>HTML</span><span>CSS</span></div></div><!--文章结束--><!--文章开始--><divclass="article"><divclass="head"><h1class="article-title">海燕</h1><spanclass="article-date">2018-03-10</span></div><divclass="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><divclass="tag-list"><span>HTML</span><span>CSS</span></div></div><!--文章结束--><!--文章开始--><divclass="article"><divclass="head"><h1class="article-title">海燕</h1><spanclass="article-date">2018-03-10</span></div><divclass="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><divclass="tag-list"><span>HTML</span><span>CSS</span></div></div><!--文章结束--></div><!--w文章列表结束--></div><!--右边结束--></body></html>
2、css样式代码
/*通用的样式*/
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
/*左边 样式*/
.left {
width: 20%;
float: left;
background-color: #4d4d4d;
height: 100%;
position: fixed;
bottom: 0;
}
/*头像*/
.head-img {
height: 120px;
width: 120px;
border-radius: 60px;
border: 3px solid white;
overflow: hidden;
margin: 15px auto;
}
.head-img img {
max-width: 100%;
}
.blog-name,
.introduce,
.blog-links,
.blog-tags{
text-align: center;
color: white;
}
.introduce {
}
.blog-links a,
.blog-tags a{
color: black;
}
.blog-links a:hover,
.blog-tags a:hover {
color: white;
}
.blog-links,
.blog-tags {
}
/*右边的样式*/
.right {
width: 80%;
float: right;
background-color: #eeeeee;
}
.article-list {
width: 85%;
margin-left: 20px;
}
.head {
border-left: 5px solid red;
padding: 15px;
}
.article-date {
float: right;
}
.article-title {
display: inline-block;
}
.article {
background-color: white;
}
.content,
.tag-list {
}
.content {
padding: 15px;
}
.tag-list {
margin-left: 15px;
padding: 15px 15px 15px 0;
border-top: 1px solid #4d4d4d;
}
.tag-list span:before {
content: "#";
3、网页效果
二、电商网页
1、html代码
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>mi.com</title><linkrel="stylesheet"href="mi.css"></head><body><!--顶部导航栏开始--><divclass="navclearfix"><divclass="containerclearfix"><ulclass="nav_leftfl"><li><ahref="">玉米商城</a></li><li><ahref="">链接A</a></li><li><ahref="">链接B</a></li><li><ahref="">链接C</a></li><li><ahref="">链接D</a></li></ul><!--<div></div>--><ulclass="nav_rightfr"><li><ahref="">购物车</a></li><li><ahref="">消息</a></li><li><ahref="">注册</a></li><li><ahref="">登录</a></li></ul></div></div><!--顶部导航栏结束--><!--首屏开始--><div><div><!--logo区开始--><divclass="logoclearfix"><divclass="logo_imgfl"><imgid="logo"src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521607594379&di=aed379c97a2685487e711b70516e0ba0&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fbaike%2Fw%3D268%2Fsign%3D60adafdcd60735fa91f049bfa6530f9f%2F8b82b9014a90f603b83891803b12b31bb151ed69.jpg"alt=""><imgsrc="https://dummyimage.com/142x55/ACF/fff.png"alt=""></div><!--顶部菜单开始--><divclass="top_menufl"><ul><li><ahref="">玉米手机</a></li><li><ahref="">苞米</a></li><li><ahref="">电视</a></li><li><ahref="">爆米花</a></li><li><ahref="">路由器</a></li><li><ahref="">智能硬件</a></li><li><ahref="">服务</a></li><li><ahref="">社区</a></li></ul></div><!--顶部菜单结束--><!--搜索开始--><divclass="search_boxfr"><inputtype="text"><inputtype="button"value="搜索"></div><!--搜索结束--></div><!--logo区结束--><!--左侧菜单和轮播图开始--><divclass="menu_adclearfix"><divclass="left_menufl"><ul><li><ahref="">手机电话卡</a></li><li><ahref="">电视盒子</a></li><li><ahref="">笔记本</a></li><li><ahref="">智能家电</a></li><li><ahref="">健康家居</a></li><li><ahref="">出行儿童</a></li><li><ahref="">路由器手机配件</a></li><li><ahref="">移动电源插线板</a></li><li><ahref="">耳机音箱</a></li><li><ahref="">生活米兔</a></li></ul></div><divclass="carouselfl"><imgsrc="https://dummyimage.com/992x460/ACF/fff.png"alt=""></div></div><!--左侧菜单和轮播图结束--><!--推广区开始--><divclass="push_adclearfix"><divclass="leftfl"><ahref=""><imgsrc="https://dummyimage.com/234x170/777/fff.png"alt=""></a></div><divclass="rightfr"><ahref=""><imgsrc="https://dummyimage.com/316x170/GHF/fff.png"alt=""></a><ahref=""><imgsrc="https://dummyimage.com/316x170/A44/fff.png"alt=""></a><ahref=""><imgsrc="https://dummyimage.com/316x170/H55/fff.png"alt=""></a></div></div><!--推广区结束--><!--闪购区开始--><div><h1>限时闪购</h1><div><ahref=""style="margin-left:0"><imgsrc="https://dummyimage.com/234x340/A44/fff.png"alt=""></a><ahref=""><imgsrc="https://dummyimage.com/234x340/DFG/fff.png"alt=""></a><ahref=""><imgsrc="https://dummyimage.com/234x340/H55/fff.png"alt=""></a><ahref=""><imgsrc="https://dummyimage.com/234x340/DF4/fff.png"alt=""></a><ahref=""><imgsrc="https://dummyimage.com/234x340/DFH/fff.png"alt=""></a></div></div><!--闪购区结束--></div></div><!--首屏结束--><!--------------------------------------------------商品展示区开始-------------------------------------><div><div><h2>家电</h2><divclass="goods_boxclearfix"><divclass="leftfl"><ahref=""><imgsrc="https://dummyimage.com/234x614/H55/fff.png"alt=""></a></div><divclass="rightfr"><divclass="right_topclearfix"><div><ahref=""><imgsrc="https://dummyimage.com/150x150/DFG/fff.png"alt=""></a><p1>商品名称</p1><p2>1999元</p2></div><div><ahref=""><imgsrc="https://dummyimage.com/150x150/DAC/fff.png"alt=""></a><p1>商品名称</p1><p2>1999元</p2></div><div><ahref=""><imgsrc="https://dummyimage.com/150x150/D27/fff.png"alt=""></a><p1>商品名称</p1><p2>1999元</p2></div><div><ahref=""><imgsrc="https://dummyimage.com/150x150/F3D/fff.png"alt=""></a><p1>商品名称</p1><p2>1999元</p2></div></div><divclass="right-downclearfix"><div><ahref=""><imgsrc="https://dummyimage.com/150x150/DFG/fff.png"alt=""></a><p1>商品名称</p1><p2>1999元</p2></div><div><ahref=""><imgsrc="https://dummyimage.com/150x150/DAC/fff.png"alt=""></a><p1>商品名称</p1><p2>1999元</p2></div><div><ahref="