前端-淘宝静态界面
前端学习——淘宝静态界面
使用渡一的前端入门课程进行学习，下面将学习笔记记录于此。希望自己的前端学习之路一帆风顺。
开发平台：sublime。
学习视频：渡一前端入门课。
参照内容：菜鸟教程。
文章目录
- 前端学习——淘宝静态界面
- 一、css升华
-
- 1.1 文字溢出处理
-
- 1.1.1 单行文本
- 1.1.2 多行文本
- 1.2 背景
- 1.3 图片转换为文字
-
- 1.3.1 使文字在仅展示css时隐藏
- 1.3.2 给盒子加一个背景颜色
- 二、 技巧
- 三、 实战操作-淘宝静态界面
-
- 3.1 效果展示
- 3.2 index.html
- 3.3 index.css
- 3.4 reset.css
- 四、总结
一、css升华
1.1 文字溢出处理
1.1.1 单行文本
首先使用 white-space:nowrap清除换行功能。
其次使用overflow: hidden清除溢出部分。
最后使用text-overflow:ellipsis使溢出部分用 “…” 展示。
尝试以下代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.ss{
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
p{
width: 300px;
}
</style>
</head>
<body>
<p class="ss">
撒大大阿达阿达我去看望读取文件递交东京dadasdad
</p>
<p>
撒大大阿达阿达我去看望读取文件递交东京dadasdad
</p>
</body>
</html>
1.1.2 多行文本
在处理多行文本溢出时，因为较为复杂，一般由后端工程师按感觉在一定文字后面用 “…” 展示，是手动的。
1.2 背景
CSS 背景属性用于定义HTML元素的背景。
比较常用的有：
背景颜色：background-color、
背景图片：background-image、
背景平铺方式：background-repeat、
背景是否固定：background-attachment、
背景定位：background-position。
尝试下列代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body
{
background-image:url('https://static.runoob.com/images/mix/img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>
1.3 图片转换为文字
在网速较差时，浏览网页时经常会遇到只展示 html 不展示 css 的情况。为了实现只展示 html 时能看到文字形式的超链接，而展示css时能看到图片形式的超链接看不到文字形式的超链接，可以采用下面的方法。
1.3.1 使文字在仅展示css时隐藏
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
display: inline-block;
text-decoration: none;
color: #424242;
width: 190px;
height: 90px;
border: 1px solid black;
background-image: url(O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png);
background-size: 100% 100%;
text-indent: 200px;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<a href="http://www.taobao.com" target="_blank">淘宝网</a>
</body>
</html>
展示效果为：
展示css：
不展示css：
1.3.2 给盒子加一个背景颜色
利用padding可以展示背景图片和背景颜色但不能展示内容的原理，使容器的高度为零，padding-top为所需高度，这样文字内容会被挤出到容器外，再使用overflow: hidden使得溢出部分隐藏即可。
尝试下列代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
display: inline-block;
text-decoration: none;
color: #424242;
width: 190px;
height: 0px;
padding-top: 90px;
border: 1px solid black;
background-image: url(O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png);
background-size: 100% 100%;
overflow: hidden;
}
</style>
</head>
<body>
<a href="http://www.taobao.com" target="_blank">淘宝网</a>
</body>
</html>
二、 技巧
-
行级元素只能嵌套行级元素，块级元素可以嵌套任何元素。但是p标签不能嵌套div。
-
a标签不能嵌套a标签。
-
使用
margin : auto使得容器相对于展示界面水平居中。 -
使用
position: absolute、float: left/right之后，会默认使用display: inline-block;，即消除行属性。 -
如果一个容器内有内容，则容器外的文本与容器内的内容顶对齐。
-
在body中修改
line-height时，如果使用相对数字，则后续的子元素会继承这个相对数字。而如果使用百分比，则会继承百分比计算后的结果。如font-size:14px ; line-height: 1.5,则后续子元素在设置font-size后，会继承line-height: 1.5。但如果设置font-size:14px ; line-height: 150%，则会继承line-height: 21px。 -
在index中使用
@import url("reset.css");导入重置css。 -
在index中可以强调如下规则
@charset 设置样式表的编码 @import 导入其他样式文件 @meida 媒体查询 @font-face; 自定义字体 -
通常情况下 h1 标签是主标签，只能出现一次。 h2 是副标签，表示副标题。h3 经常用于板块标题。
-
盒模型可以分为标准盒模型，IE盒模型(怪异盒模型)。
其中 标准盒模型的总高度=border+width+padding。
怪异盒模型的总高度=width -
width: calc(100% - 190px); 可以使用calc函数计算宽度，记得带空格。
三、 实战操作-淘宝静态界面
跟着课程手敲了一遍静态界面，感觉收获特别特比特别多。现在把代码贴在这里，以后还能回顾一下。
3.1 效果展示
通过html与css完成了淘宝的静态界面，原界面有许多动态效果需要js，尚未学习，所以只实现静态界面的功能。（感觉内容量还是很大的，有很多细节）
这里只粘贴一下代码。
3.2 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝网 - 淘！我喜欢</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="icon" href="favicon.ico">
<!-- 放置头的logo -->
<base target="_blank">
<!-- 设置基础路径 -->
</head>
<body>
<!-- 头部信息 -->
<div id="headMessage" class="clearfix layer">
<ul class="fl">
<li>
<span >中国大陆</span>
<span class="iconfont arrow"></span>
</li>
<li class="mr7">
<a href="" class="login mr7">亲，请登录</a>
<a href="">免费注册</a>
</li>
<li><a href="">手机逛淘宝</a></li>
</ul>
<ul class="fr">
<li>
<a href="">我的淘宝</a>
<span class="iconfont arrow"></span>
</li>
<li>
<span class="iconfont mr5 c4"></span>
<a href="#">购物车</a>
<strong>0</strong>
<span class="iconfont "></span>
</li>
<li>
<a href="">
<span class="iconfont mr5 store">󰅄</span>收藏夹
</a>
<span class="iconfont arrow"></span>
</li>
<li><a href="">商品分类</a></li>
<li class="line">|</li>
<li>
<a href="">千牛卖家中心</a>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="">联系客服</a>
<span class="iconfont arrow"></span>
</li>
<li>
<span class="iconfont c4 mr5" ></span>
<a href="">网站导航</a>
<span class="iconfont arrow"></span>
</li>
</ul>
</div>
<!-- 头部广告 -->
<div id="headAd">
<div class="layer clearfix">
<a href=""><img src="images/go.png" ></a>
<ul class="fr">
<li class="item1">
<a href="#" class="fr">
<img src="images/adimg_01.jpg" alt="">
</a>
<h3><a href="">电视会场</a></h3>
<p><a href="">最高降2000</a></p>
</li>
<li class="item2">
<a href="#" class="fr">
<img src="images/adimg_02.jpg" alt="">
</a>
<h3><a href="">电视会场</a></h3>
<p><a href="">最高降2000</a></p>
</li>
<li class="item3">
<a href="#" class="fr">
<img src="images/adimg_03.jpg" alt="">
</a>
<h3><a href="">电视会场</a></h3>
<p><a href="">最高降2000</a></p>
</li>
<li class="item4">
<a href="#" class="fr">
<img src="images/adimg_04.jpg" alt="">
</a>
<h3><a href="">电视会场</a></h3>
<p><a href="">最高降2000</a></p>
</li>
<li class="item5">
<a href="#" class="fr">
<img src="images/adimg_05.jpg" alt="">
</a>
<h3><a href="">电视会场</a></h3>
<p><a href="">最高降2000</a></p>
</li>
<!-- <li>
<a href="">
<a href="" class="fr"><img src="images/adimg_01.jpg" ></a>
<h3><a href="">电视会场</a></h3>
<p><a href="">最高降2000</a></p>
</a>
</li> -->
</ul>
</div>
</div>
<!-- 头部搜索 -->
<div id="headSearch">
<div class="clearfix layer">
<!-- <h1><a href="#"><img src="images/logo.png" alt="淘宝网"></a></h1> -->
<h1 class="fl"><a href="#">淘宝网</a></h1>
<div class="code fr">
<span class="iconfont close"></span>
<span class="c5">手机淘宝</span>
<img src="images/code.png" alt="" >
</div>
<div class="search">
<ul class="searchTab cleafix">
<li class="active">宝贝</li>
<li>天猫</li>
<li>店铺</li>
</ul>
<div class="searchContent clearfix">
<form action="" method="">
<div class="searchBox fl">
<input type="text" >
<div class="placeholder">
<i class="iconfont"></i>
<span>网红裤腰带 9.9包邮</span>
</div>
<span class="iconfont imgSearch"></span>
</div>
<div class="btn fl">
<button type="submit">搜索</button>
</div>
</form>
</div>
<div class="hotKey">
<a href="" class="c5">积木</a>
<a href="">网线</a>
<a href="">爬行垫</a>
<a href="" class="c5">时尚连衣裙</a>
<a href="">男士t血</a>
<a href="" class="c5"> 时尚休闲裤</a>
<a href="">粽子</a>
<a href="">沙发</a>
<a href="">风扇</a>
<a href="">定制窗帘</a>
<a href="">男士内裤</a>
<a href="">凉席三件套</a>