做淘宝页面前的基础准备
文章目录
浏览器的默认加载策略
当网站网速不高的时候,浏览器会屏蔽css和JavaScript的,所以网页图片的url尽量放在html中
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝一下</title>
<link rel="stylesheet" type="text/css" href="taobao.css">
</head>
<body>
<!-- 处理默认加载的方法一
当网好的时候能加载图片时会加载图片 淘宝网三个字默认隐藏
默认加载时css不加载的情况下会显示下列三个字
方法二 padding上可以添加背景图片和衍生物-->
<a href="http://taobao.com" target="_blank">淘宝网</a>
</body>
</html>
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #424242;
}
/* 方法一
a {
display: inline-block;
text-decoration: none;
color:#424242 ;
width: 180px;
height: 70px;
border:1px solid black;
background-image: url(https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg);
background-size: 220px 70px;
text-indent:180px; 首行缩进 缩进容器的宽 就是把淘宝网三个字放外边儿去
white-space: nowrap; 去除自动换行 超出部分横向展示
overflow: Hidden; 超出部分隐藏
} */
/* 方法二 */
a {
display: inline-block;
text-decoration: none;
color:#424242 ;
width: 180px;
height: 0; /*高度变成0 让图片出不来 文字能出来是因为行级元素宽高由自己内容定义*/
padding-top:70px; /*加padding用来放背景图 padding内不能放文字
但是能放图片和颜色 上边距的高度等于容器高度 就相当于容器都被边距占满了
其余内容就是溢出的部分 设置隐藏就看不见了*/
overflow: Hidden; /*隐藏超出容器的部分 文字被隐藏 因为高度为0*/
border:1px solid black;
background-image: url(https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg);
background-size: 220px 70px;
}
元素嵌套规则
行级元素只能嵌套行级元素
跨级元素可以嵌套任何元素
特殊元素(p标签和a标签)
p标签中不能嵌套div元素
<p>
<div></div>
</p>
这么写会被浏览器砍成两个p标签 一个div标签
<p></p>
<div></div>
<p></p>
a标签中不能嵌套a标签,不然你让浏览器选哪个!!!
基础补充
div.wrapper>div.content 就是生成两个div 第一个div类为wrapper 第二个div类是content的简写
导航栏布局
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝一下</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #424242;
}
.wrapper { /*一整行背景*/
height: 30px;
background-color: #cccccc;
}
.content { /*中间有内容的部分*/
margin:0 auto; /*上下0 左右自适应 也就是左右居中*/
width: 800px;
height: 30px;
background-color: #0f0;
}
文本元素
凡是带有inline的元素都是文本元素 所以inline 和 inline-block都是文本元素
有文字特性就会被分割,文字中间有4px间隙
<!--运行之后照片中间会有间隙-->
<img src="照片.jpg">
<img src="照片.jpg">
<img src="照片.jpg">
<img src="照片.jpg">
<!--解决方案一是去除照片之间的空格(文字属性造成的间隔)-->
<img src="照片.jpg"><img src="照片.jpg"><img src="照片.jpg"><img src="照片.jpg">
img {
width:100px;
height:200px;
margin-left:-6px; /*解决方案二是挪边距 但是这个不好 因为最后打包上传会压缩代码 系统会去空格去回车 那有margin-left照片之间就会重叠*/
}
行级元素
一个行级元素如果设置了position:absolute或者float:left/right其中的一个 这个元素就会在内部被转换成display:inline-block。所以就可以设置宽高
一旦一个行级块元素或者一个文本元素里面包含文字了,那外面的文字就会和里面的文字底对齐
<span>123</span> 呵呵
* {
margin:0;
padding:0;
}
span {
display:inline-block;
width:100px;
height:100px;
background-color:red;
font-sizee:30px;
vertical-align:-5px; /*调对齐位置 写middle就是居中对齐*/
}
实现导航栏左右浮动效果
div>ul*2 在一个div中建两个ul的快捷键
<div>
<ul style="float:left"></ul> <!--左边浮动部分-->
<ul style="float:right"></ul> <!--右边浮动部分-->
</div>
实现图标加文本加更多的展示
linear-gradient() 定义与用法
linear-gradient() 函数
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。
/* 从上到下,蓝色渐变到红色 */
linear-gradient(blue, red);
/* 渐变轴为45度,从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
练习
(阿里巴巴笔试题)使用语义化的html标签以及css完成以下布局;
{最多俩行20px #33, 顶部对齐图片,底部间距8px}
{12px #666 行高1.2}使用语义化的html标签完成以下布局,考虑模块化和扩展性。容器默认宽度320px,右侧。
img.jpg
容器默认宽度是320px,图片100*100
hover时容器宽度变成400px
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>更多新闻</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<img src="./img.png" class="img">
<p class="rowOne">{最多俩行20px #333, 顶部对齐图片,底部间距8px}</p>
<p class="rowTwo">{12px #666 行高1.2}使用语义化的html标签完成以下布局,考虑模块化和扩展性。容器默认宽度320px,右侧。</p>
</div>
</body>
</html>
* {
margin:0;
padding: 0;
}
.wrapper .img {
float: left; /*让文字顶部对齐*/
height: 100px;
width: 100px;
}
.wrapper {
width: 320px;
}
.wrapper:hover {
width: 400px;
}
.rowOne {
font-size: 20px;
color:#333;
height: 40px;;
line-height: 20px;
overflow: hidden;
margin-bottom: 8px;
}
.rowTwo {
font-size: 12px;
color:#666;
line-height: 1.2em;/*1.2倍行距*/
}