湖南城乡住房建设厅网站,酷家乐在线家装设计,wordpress模版制作,工作室建设方案怎么写目录
一、网页赏析#xff1a;
二、代码分三部分#xff1a;
1、html代码#xff1a;
2、main.css赏析#xff1a;
3、初始化reset.css代码#xff1a;
三、主要素材下载地址#xff1a; 一、网页赏析#xff1a; 二、代码分三部分#xff1a;
1.html
2.初始化…目录
一、网页赏析
二、代码分三部分
1、html代码
2、main.css赏析
3、初始化reset.css代码
三、主要素材下载地址 一、网页赏析 二、代码分三部分
1.html
2.初始化重置reset.css
3.主要格式main.css
注最下面有需要的素材可供大家练习使用。 1、html代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefreset.csslink relstylesheet hrefmain.css
/headbody!-- 1.login部分 --div classlogin!-- 1.1 login内容部分 --div classloginbox!-- 1.11 左侧欢迎栏 --h3欢迎来到王者荣耀英雄购买商城/h3!-- 1.12右侧我的订单 --div classloginrg!-- 1.121 已经登录 --div classinlogin欢迎您a href张山/a/div!-- 1.122未登录 --div classunlogina href登录/aspan|/spana href注册/a/div!-- 1.123 我的订单 --div classmyloginspan|/spana href我的购物车/aspan|/spana href我的订单/a/div/div/div/div!-- 2.search部分设置 --div classsearch!-- 内部内容盒子设置 --div classsearchbox!-- 2.1左侧logo设置 --a hrefimg srcimages/王者荣耀.jpg alt/a!-- 2.2搜索框设置 --div classsearchcarform actioninput classtxt typetext placeholder搜索input classsub typesubmit value搜索/form/div!-- 2.3右侧购物车 --div classbuya href我的购物车/aspan0/span/div/div/div!-- 3.全部英雄分类 --div classcate!-- 内部内容设置 --div classcatecon!-- 3.1全部英雄分类 --a classall href全部英雄分类/a!-- 3.2首页设置 --ul classcatelistlia href首页/a/lilispan|/span/lilia href英雄介绍/a/lilispan|/span/lilia href打折促销/a/li/ul/div/div!-- 4.slide --div classslide!-- 里面内容 --div classslidecon!-- 4.1左侧 英雄展示 --ul classflistlia hrefNo.1【肉盾坦克】/a/lilia hrefNo.2【铁血战士】/a/lilia hrefNo.3【灵活刺客】/a/lilia hrefNo.4【玄幻法师】/a/lilia hrefNo.5【远程射手】/a/lilia hrefNo.6【第三辅助】/a/li/ul!-- 4.2中间部分 slide图 --div classslidepic!-- 4.21中间图片 --ul classslistlia hrefimg srcimages/李白.jpg alt/a/li/ul/div!-- 4.3右边图片 --div classrgpica hrefimg srcimages/王昭君.jpg alt/aa hrefimg srcimages/关羽.jpg alt/a/div/div/div!-- 5.英雄设置 --div classher!-- 内部内容 --div classhercon!-- 5.1头部div --div classheada classfheada href灵活刺客/a!-- 3.2首页设置 --ul classheadlistlispan|/span/lilia href官方活动/a/lilia href限时活动/a/li/ula classheadlista href查看更多gt;gt;/a/div!-- 5.2左侧广告 --div classlfada hrefimg srcimages/刺客.jpg alt/a/div!-- 5.3右侧列表 --ul classherlistlih5凤求凰—李白/h5a hrefimg srcimages/刺客李白.jpg alt/adiv¥18888/div/lilih5白龙吟—韩信/h5a hrefimg srcimages/韩信.jpg alt/adiv¥18888/div/lilih5剑舞者—花木兰/h5a hrefimg srcimages/花木兰.jpg alt/adiv¥18888/div/lilih5神梦一刀—橘右京/h5a hrefimg srcimages/橘右京.jpg alt/adiv限时活动/div/li/ul/div/div!-- 6.英雄设置 --div classher!-- 内部内容 --div classhercon!-- 6.1头部div --div classheada classfheada href铁血战士/a!-- 6.11首页设置 --ul classheadlistlispan|/span/lilia href官方活动/a/lilia href限时活动/a/li/ula classheadlista href查看更多gt;gt;/a/div!-- 6.2左侧广告 --div classlfada hrefimg srcimages/亚瑟.jpg alt/a/div!-- 6.3右侧列表 --ul classherlistlih5老夫子/h5a hrefimg srcimages/老夫子.jpg alt/adiv¥ 18888/div/lilih5曹操/h5a hrefimg srcimages/曹操.jpg alt/adiv¥ 18888/div/lilih5吕布/h5a hrefimg srcimages/吕布.jpg alt/adiv¥ 18888/div/lilih5杨戬/h5a hrefimg srcimages/杨戬.jpg alt/adiv¥ 18888/div/li/ul/div/div/body/html 2、main.css赏析
/* 注因为大部分文字都是12 颜色相同所以总体设置 */
body {font-size: 12px;color: #666666;
}/* 1.login最外侧盒子设定 高29 背景颜色#f7f7f7 下边框1 */
.login {height: 29px;background: #f7f7f7;border-bottom: 1px solid #dddddd;
}/* 1.1 login内容部分设置 高20 宽1200 居中*/
.loginbox {width: 1200px;height: 29px;margin: 0 auto;
}/* 1.11左侧欢迎栏设置 居中 注意浮动 */
.loginbox h3 {line-height: 29px;float: left;
}/* 1.12右侧我的订单设置 宽290 高29 居中 注意浮动 */
.loginrg {width: 290px;height: 29px;line-height: 29px;float: right;
}/* 1.12登录与未登录设置隐藏 注意浮动*/
.inlogin {float: left;
}
.unlogin {display: none;
}/* 1.121已经登录设置 a颜色orange */
.inlogin a {color: red;
}/* 1.122未登录设置 span左右间距 a 鼠标点击变颜色; */
.unlogin span,
.mylogin span {margin: 0 10px;
}
.unlogin a,
.mylogin a {color: #666666;
}.unlogin a:hover,
.mylogin a:hover {color: red;
}/* 2.search部分设置 宽默认 高90 */
.search {height: 90px;
}/* 内部内容盒子设置 宽1200 高90 居中 背景颜色主要测试用*/
.searchbox {width: 1200px;height: 90px;margin: 0 auto;/* background: palegreen; */
}/* 2.1左侧logo设置 位置 上29 左17 */
.searchbox a {margin-left: 17px;margin-top: 29px;/* 注浮动或者转化行内块元素一般浮动为主 *//* display: inline-block; */float: left;
}
.searchbox img {width: 153px;height: 59px;
}/* 2.2搜索框设置 宽616 高38 边框 位置左120 上36 浮动 */
.searchcar {width: 616px;height: 38px;border: 2px solid red;margin-left: 120px;margin-top: 36px;/* 注出问题找浮动 */float: left;
}
/* 搜索框搜索栏设置 宽516 高38 居中 背景图 缩进40 */
.searchcar .txt {width: 516px;height: 38px;line-height: 38px;background: url(images/search.png) no-repeat 12px 9px;/* background: palevioletred; */text-indent: 40px;
}
/* 搜索框搜索按钮设置 宽100 高39 背景颜色 字白 14 行高38居中 浮动*/
.searchcar .sub {width: 100px;height: 39px;background: red;font-size: 14px;color: white;line-height: 39px;float: right;
}/* 2.3右侧购物车 宽200 高40 右浮动 位置上36 */
.buy {width: 200px;height: 40px;float: right;margin-top: 36px;/* background-color: red; */
}
/* 设置a 宽158 高38 居中 背景图 字14颜色 缩进56 */
.buy a {/* 因为要给行内元素设置宽高 改变类型 *//* display: inline-block; */float: left;width: 158px;height: 38px;border: 1px solid #dddddd;margin-top: 0;margin-left: 0;color: red;font-size: 14px;line-height: 38px;background: url(images/buycar.png) no-repeat 14px 10px;text-indent: 56px;/* background: purple; */
}
/* 设置span 宽40 高40 背景颜色 字18 白 居中 */
.buy span {/* 因为要给行内元素设置宽高 改变类型 *//* display: inline-block; */float: right;width: 40px;height: 40px;background: red;font-size: 18px;color: white;line-height: 40px;text-align: center;/* float:right; */
}/* 3.全部英雄分类最外侧 高40 上26 边框2 #37ab40 */
.cate {width: 1200px;height: 40px;border-bottom: 2px solid red;margin: 26px auto 0;
}/* 内容设置 宽1200 高40 居中 */
.catecon {width: 1200px;height: 40px;margin: 0 auto;background: purple;
}/* 3.1全部英雄分类 宽200高40 居中 字14 白背景色 浮动 */
.all {width: 200px;height: 40px;line-height: 40px;text-align: center;font-size: 14px;color: white;/* 设置浮动主要是给首页list找边界 */float: left;
}/* 3.2首页设置 宽215高40 左35 上下居中 */
.catelist {width: 215px;height: 40px;line-height: 40px;margin-left: 35px;/* 注有问题找浮动 */float: left;
}
/* 设置li 字14 横排一行浮动 */
.catelist li {float: left;
}/* span a 标签设置 左右20 字体颜色 */
.catelist span {margin: 0 20px;
}
.catelist a {color: white;
}/* 4.slide 高270 内容宽1200高270 居中*/
.slide {height: 270px;
}
.slidecon {width: 1200px;height: 270px;margin: 0 auto;
}/* 4.1左侧英雄列表设置 宽200高270 有问题找浮动 */
.flist {width: 200px;height: 270px;/* background: black; */float: left;
}/* 英雄列表 宽198 高44 边框 居中 背景图 */
.flist li {width: 198px;height: 44px;border: 1px solid #f7f7f7;border-top: 0;line-height: 44px;text-align: center;float: left;
}/* a 字14 背景图 有问题找浮动 yo*/
.flist a {font-size: 14px;width: 198px;height: 44px;color: red;
}/* 4.2中间图设置 宽760 高279 有问题找浮动 */
.slidepic {width: 760px;height: 279px;float: left;overflow: hidden;position: relative;
}
.slidepic img {width: 760px;height: 270px;
}/* 中间图宽760*4 高270 有问题找浮动*/
.slist {width: 3040px;height: 270px;
}
.slist li {float: left;
}/* 4.3右侧图片 消除行间距设置父元素为0*/
.rgpic {font-size: 0px;
}
.rgpic img {width: 240px;height: 135px;
}/* 5.英雄 设置外高335 上25 内宽1200高335 居中*/
.her {height: 335px;margin-top: 25px;
}
.hercon {width: 1200px;height: 335px;margin: 0 auto;
}/* 上面文字 */
.head {width: 1200px;height: 29px;border-bottom: 2px solid red;
}
/* a 灵活刺客 16px margin-right:20px; */
.fheada {font-size: 16px;margin-right: 20px;color: blueviolet;font-weight: bold;float: left;
}
/* li标签 高29 左10 */
.headlist li {height: 29px;line-height: 29px;float: left;margin-left: 10px;
}/* 更多设置 高20 */
.headlista {height: 29px;line-height: 29px;float: right;
}/* 5.2左侧广告 宽200 高300 有问题找浮动 */
.lfad {width: 200px;height: 300px;float: left;
}
.lfad img {width: 200px;height: 300px;
}/* 5.3右侧列表产品 宽1000 高300*/
.herlist {width: 1000px;height: 300px;/* overflow: hidden; */float: left;
}/* 列表设置 宽249 高299 边框下右 居中 */
.herlist li {width: 249px;height: 299px;border-bottom: 1px solid #666666;border-right: 1px solid #666666;text-align: center;float: left;
}/* 英雄设置 字14 高50 下10 */
.herlist h5 {font-size: 14px;height: 50px;line-height: 50px;color: purple;font-weight: bold;margin-bottom: 10px;
}
.herlist img {width: 180px;height: 180px;
}/* 金钱设置 字20 红加粗 高35 上17 */
.herlist div {font-size: 20px;color: red;font-weight: bold;height: 35px;line-height: 35px;margin-top: 17px;
}/* 6.英雄 设置外高335 上25 内宽1200高335 居中*/
.her {height: 335px;margin-top: 25px;
}
.hercon {width: 1200px;height: 335px;margin: 0 auto;
}/* 6.1头部文字 */
.head {width: 1200px;height: 29px;border-bottom: 2px solid red;
}
/* a 铁血战士 16px margin-right:20px; */
.fheada {font-size: 16px;margin-right: 20px;color: blueviolet;font-weight: bold;float: left;
}
/* li标签 高29 左10 */
.headlist li {height: 29px;line-height: 29px;float: left;margin-left: 10px;
}/* 更多设置 高20 */
.headlista {height: 29px;line-height: 29px;float: right;
}/* 6.2左侧广告 宽200 高300 有问题找浮动 */
.lfad {width: 200px;height: 300px;float: left;
}
.lfad img {width: 200px;height: 300px;
}/* 6.3右侧列表产品 宽1000 高300*/
.herlist {width: 1000px;height: 300px;/* overflow: hidden; */float: left;
}/* 列表设置 宽249 高299 边框下右 居中 */
.herlist li {width: 249px;height: 299px;border-bottom: 1px solid #666666;border-right: 1px solid #666666;text-align: center;float: left;
}/* 英雄设置 字14 高50 下10 */
.herlist h5 {font-size: 14px;height: 50px;line-height: 50px;color: purple;font-weight: bold;margin-bottom: 10px;
}
.herlist img {width: 180px;height: 180px;
}/* 金钱设置 字20 红加粗 高35 上17 */
.herlist div {font-size: 20px;color: red;font-weight: bold;height: 35px;line-height: 35px;margin-top: 17px;
}3、初始化reset.css代码
/* 元素初始化重置 *//* 1.所有元素内外边距初始化 */
/* 主要元素包括body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,dt,li,put, */
* {margin: 0;padding: 0;
}/* 2.列表小圆点格式化 */
ul,
ol {list-style: none;
}/* 3. a下划线删除 */
a {text-decoration: none;
}/* 4. 伪类 */
.clearfix:before,
.clearfix:after {content: ;display: table;
}.clearfix:after {clear: both;
}.clearfix {zoom: 1;
}/* 5.浮动 */
.rf {float: right;
}.lf {float: left;
}/* 6.标题标签 */
h1,
h2,
h3,
h4,
h5,
h6 {font-size: 100%;font-weight: normal;
}/* 7.input */
input {outline: none;border: 0;
}三、主要素材下载地址 百度网盘http://pan.baidu.com/s/1i5tHYCl
