html-css练习题(天天生鲜静态网页制作)
来源:互联网 发布:矩阵相似性度量 编辑:程序博客网 时间:2024/06/10 18:05
先来看一下效果图:
主要要求:
注:最下面有素材链接地址可以自己练习使用
/* 1.login最外侧盒子设定高29背景颜色#f7f7f7 下边框1 */
/* 1.1 login内容部分设置 高20 宽1200居中*/
/* 1.11左侧欢迎栏设置居中注意浮动 */
/* 1.12右侧我的订单设置宽290高29 居中注意浮动 */
/* 1.12登录与未登录设置隐藏 注意浮动*/
/* 1.121已经登录设置 a颜色orange */
/* 1.122未登录设置 span左右间距 a 鼠标点击变颜色; */
/* 2.search部分设置宽默认高90 */
/*内部内容盒子设置宽1200高90 居中背景颜色主要测试用*/
/* 2.1左侧logo设置位置上29左17 */
/* 2.2搜索框设置宽616高38 边框位置左120上36 浮动 */
/* 搜索框搜索栏设置宽516高38 居中背景图 缩进40 */
/* 搜索框搜索按钮设置宽100高39 背景颜色字白 14行高38居中浮动*/
/* 2.3右侧购物车宽200高40右浮动位置上36 */
/* 设置a 宽158高38 居中背景图字14颜色缩进56 */
/* 设置span 宽40高40 背景颜色字18白居中 */
/* 3.全部商品分类最外侧高40上26 边框2 #37ab40 */
/*内容设置宽1200高40居中 */
/* 3.1全部商品分类宽200高40 居中字14白背景色浮动 */
/*设置浮动主要是给首页list找边界 */
/* 3.2首页设置宽215高40左35上下居中 */
/* 设置li 字14横排一行浮动 */
/* span a标签设置左右20字体颜色 */
/* 4.slide高270 内容宽1200高270居中*/
/* 4.1左侧水果列表设置宽200高270有问题找浮动 */
/*水果列表宽198高44边框居中背景图 */
/*雪碧图位置设置采用 nth选择器 */
/* a字14背景图有问题找浮动 yo*/
/* 4.2轮播图设置宽760高279有问题找浮动 */
/*轮播图宽760*4高270 有问题找浮动*/
/* 4.22左右按钮宽25高25背景图定位*/
/* 4.23小圆点设置 */
/* 4.3右侧广告消除行间距设置父元素为0*/
/* 5.foods设置外高335 上25 内宽1200高335居中*/
/* 上面文字 */
/* a 海鲜水产 16px margin-right:20px; */
/* li标签高29左10 */
/*更多设置高20 */
/* 5.2左侧广告宽200高300有问题找浮动 */
/* 5.3右侧列表产品 宽1000高300*/
/*列表设置宽249高299边框下右居中 */
/*基围虾设置字14高50下10 */
/* 39.9元设置字20 红加粗高35上17 */
Html代码赏析:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="reset.css"><link rel="stylesheet" href="main.css"></head><body><!-- 1.login部分,天天生鲜欢迎您! --><div class="login"><!-- 1.1 login内容部分 --><div class="loginbox"><!-- 1.11 左侧欢迎栏 --><h3>欢迎您来天天生鲜!</h3><!-- 1.12右侧我的订单 --><div class="loginrg"><!-- 1.121 已经登录 --><div class="inlogin">欢迎您:<a href="">张山</a></div>
<!-- 1.122未登录 --><div class="unlogin"><a href="">登录</a><span>|</span><a href="">注册</a></div>
<!-- 1.123 我的订单 --><div class="mylogin"><span>|</span><a href="">我的购物车</a><span>|</span><a href="">我的订单</a></div></div></div></div>
<!-- 2.search部分设置 --><div class="search"><!-- 内部内容盒子设置 --><div class="searchbox"><!-- 2.1左侧logo设置 --><a href=""><imgsrc="images/logo.png"alt=""></a><!-- 2.2搜索框设置 --><div class="searchcar"><form action=""><input class="txt"type="text"placeholder="搜索"><input class="sub"type="submit"value="搜索" ></form></div><!-- 2.3右侧购物车 --><div class="buy"><a href="">我的购物车</a><span>0</span>
</div></div></div><!-- 3.全部商品分类 --><div class="cate"><!-- 内部内容设置 --><div class="catecon"><!-- 3.1全部商品分类 --><a class="all" href="">全部商品分类</a><!-- 3.2首页设置 --><ul class="catelist"><li><a href="">首页</a></li><li><span>|</span></li><li><a href="">手机生鲜</a></li><li><span>|</span></li><li><a href="">抽奖</a></li></ul></div></div>
<!-- 4.slide --><div class="slide"><!-- 里面内容 --><div class="slidecon"><!-- 4.1左侧 水果列表展示 --><ul class="flist"><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></ul><!-- 4.2中间部分 slide轮播图 --><div class="slidepic"><!-- 4.21轮播图图片 --><ul class="slist"><li><a href=""><imgsrc="images/slider.jpg"alt=""></a></li><li><a href=""><imgsrc="images/slider.jpg"alt=""></a></li><li><a href=""><imgsrc="images/slider.jpg"alt=""></a></li><li><a href=""><imgsrc="images/slider.jpg"alt=""></a></li></ul><!-- 4.22左右按钮 --><div class="lfbtu"></div><div class="rgbtu"></div><!-- 4.23小圆点 --><ul class="rd"><li class="active"></li><li></li><li></li><li></li></ul></div><!-- 4.3右边图片 --><div class="rgpic"><a href=""><imgsrc="images/right01.jpg"alt=""></a><a href=""><imgsrc="images/right02.jpg"alt=""></a></div>
</div></div>
<!-- 5.food商品设置 --><div class="foods"><!-- 内部内容 --><div class="foodscon"><!-- 5.1头部div --><div class="fhead"><a class="fheada" href="">海鲜水产</a><!-- 3.2首页设置 --><ul class="fheadlist"><li><span>|</span></li><li><a href="">深海鱬鱼</a></li><li><a href="">帝王蟹</a></li></ul><a class="fheadlista" href="">查看更多>></a>
</div><!-- 5.2左侧广告 --><div class="lfad"><a href=""><imgsrc="images/fish.jpg"alt=""></a></div><!-- 5.3右侧列表产品 --><ul class="foodslist">
<li><h5>基围虾</h5><a href=""><imgsrc="images/daxia.jpg"alt=""></a><div>¥39.9</div></li>
<li><h5>基围虾</h5><a href=""><imgsrc="images/daxia.jpg"alt=""></a><div>¥39.9</div></li>
<li><h5>基围虾</h5><a href=""><imgsrc="images/daxia.jpg"alt=""></a><div>¥39.9</div></li>
<li><h5>基围虾</h5><a href=""><imgsrc="images/daxia.jpg"alt=""></a><div>¥39.9</div></li>
</ul></div></div>
</body></html>
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:0auto;}
/* 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:orange;}
/* 1.122未登录设置 span左右间距 a 鼠标点击变颜色; */.unlogin span, .mylogin span{margin:010px;}.unlogin a, .mylogin a{color:#666666;}
.unlogin a:hover, .mylogin a:hover{color:orange;}
/* 2.search部分设置 宽默认 高90 */.search{height:90px;}
/* 内部内容盒子设置 宽1200 高90 居中 背景颜色主要测试用*/.searchbox{width:1200px;height: 90px;margin:0auto;/* background: palegreen; */}
/* 2.1左侧logo设置 位置 上29 左17 */.searchbox a{margin-left: 17px;margin-top:29px;
/* 注:浮动或者转化行内块元素,一般浮动为主 *//* display: inline-block; */float: left;}
/* 2.2搜索框设置 宽616 高38 边框 位置左120 上36 浮动 */.searchcar{width:616px;height: 38px;border:1pxsolid #37ab40;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: #37ab40;
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:1pxsolid #dddddd;margin-top:0;margin-left:0;
color:#37ab40;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: #ff8800;
font-size:18px;color:white;line-height: 40px;text-align: center;/* float:right; */
}
/* 3.全部商品分类最外侧 高40 上26 边框2 #37ab40 */.cate{height: 40px;margin-top:26px;border-bottom: 2px solid #37ab40;}
/* 内容设置 宽1200 高40 居中 */.catecon{width:1200px;height: 40px;margin:0auto;}
/* 3.1全部商品分类 宽200高40 居中 字14 白背景色 浮动 */.all{width:200px;height: 40px;line-height: 40px;text-align: center;
font-size:14px;color:white;background: #37ab40;
/* 设置浮动主要是给首页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:020px;}.catelist a{color:#666666;}
/* 4.slide 高270 内容宽1200高270 居中*/.slide{height:270px;}.slidecon{width:1200px;height: 270px;margin:0auto;}
/* 4.1左侧水果列表设置 宽200高270 有问题找浮动 */.flist{width:200px;height: 270px;/* background: black; */
float:left;}
/* 水果列表 宽198 高44 边框 居中 背景图 */.flist li{width:198px;height: 44px;border:1pxsolid #f7f7f7;border-top:0;line-height: 44px;text-align: center;background: url(images/sprite.png) no-repeat 33px 9px;}
/* 雪碧图位置设置采用 nth选择器 */.flist li:nth-child(2){background-position-y: -41px;}.flist li:nth-child(3){background-position-y: -91px;}.flist li:nth-child(4){background-position-y: -141px;}
.flist li:nth-child(5){background-position-y: -191px;}.flist li:nth-child(6){background-position-y: -241px;}
/* a 字14 背景图 有问题找浮动 yo*/.flist a{font-size:14px;background: url(images/sprite.png) no-repeat 170px -291px;
/* display: inline-block; */float:right;width:198px;height:44px;}
/* 4.2轮播图设置 宽760 高279 有问题找浮动 */.slidepic{width:760px;height: 279px;
float:left;overflow: hidden;position: relative;}
/* 轮播图宽760*4 高270 有问题找浮动*/.slist{width:3040px;height:270px;}.slist li{float:left;}
/* 4.22左右按钮 宽25高25 背景图 定位*/.lfbtu{width:25px;height: 25px;background: url(images/sprite.png) no-repeat 0px -350px;
position: absolute;bottom:123px;left: 12px;cursor: pointer;}
.rgbtu{width:25px;height: 25px;background: url(images/sprite.png) no-repeat 0px -400px;
position: absolute;bottom:123px;right: 12px;cursor: pointer;}/* 4.23小圆点设置 */.rd{height: 11px;/* background: black; */
width:760px;position: absolute;bottom:19px;left:0;
text-align: center;}
.rd li{width:11px;height: 11px;/* background: red; */border-radius: 50%;
/* 注:不适用浮动,因为浮动不能居中 *//* float:left; */display: inline-block;}.active{background: greenyellow;}
/* 4.3右侧广告 消除行间距设置父元素为0*/.rgpic{font-size:0px;}
/* 5.foods 设置外高335 上25 内宽1200高335 居中*/.foods{height: 335px;margin-top: 25px;}.foodscon{width:1200px;height: 335px;margin:0auto;}
/* 上面文字 */.fhead{width:1200px;height: 29px;border-bottom: 2px solid #37ab40;}/* a 海鲜水产 16px margin-right:20px; */.fheada{font-size:16px;margin-right: 20px;color:#37ab40;font-weight: bold;
float:left;}/* li标签 高29 左10 */.fheadlist li{height: 29px;line-height: 29px;float:left;margin-left: 10px;}
/* 更多设置 高20 */.fheadlista{height: 29px;line-height: 29px;
float:right;}
/* 5.2左侧广告 宽200 高300 有问题找浮动 */.lfad{width:200px;height: 300px;
float:left;}
/* 5.3右侧列表产品 宽1000 高300*/.foodslist{width:1000px;height: 300px;
/* overflow: hidden; */float:left;}
/* 列表设置 宽249 高299 边框下右 居中 */.foodslist li{width:249px;height: 299px;border-bottom: 1px solid #666666;border-right: 1px solid #666666;
text-align: center;float:left;}
/* 基围虾设置 字14 高50 下10 */.foodslist h5{font-size:14px;height: 50px;line-height: 50px;
margin-bottom: 10px;}/* 39.9设置 字20 红加粗 高35 上17 */.foodslist div{font-size:20px;color:red;font-weight: bold;height: 35px;line-height: 35px;
margin-top:17px;
}
初始化设置main.css文件代码:
- html-css练习题(天天生鲜静态网页制作)
- html静态网页制作中div+css的浅运用
- 使用html制作静态网页
- html实战-制作静态网页
- html/css的网页制作
- css和html制作网页
- HTML+CSS制作登陆网页
- 网页设计与制作(HTML+CSS)(一)
- 网页设计与制作(HTML+CSS)(二)
- 网页设计与制作(HTML+CSS)(三)
- 制作一张简单的网页(HTML+CSS+JS)【1】
- HTML-css 简单网页小制作(图片、文字)---Day2
- 第二部分:html div+css(静态网页)(一)
- 第二部分:html div+css(静态网页)(二)
- django项目(天天生鲜电商项目)
- 《html, css, javascritp网页制作》 刘西杰
- CSS+html:天涯网页仿照制作
- HTML、CSS、JavaScript网页制作笔记
- 已编译OpenCV3.3 +contrib+vs2013+x86/x64版本
- 关于MyBatis会用到的SQL整理
- latex多行公式显示一个编号
- 11款适合娃娃们学习的软件
- [NOIP模拟赛]涂色方案
- html-css练习题(天天生鲜静态网页制作)
- 和为S的两个数字
- java并发编程实践之共享对象学习笔记
- CentOS安装配置ClamAV
- Spark 报错scala.reflect.api.JavaUniverse.runtimeMirror
- Spark日志分析项目Demo(5)--自定义Accumulator
- Android息屏与亮屏
- React Native 环境搭建 初始化项目 运行 调试
- Python3之利用requests和BeautifulSoup抓取部分信息