做淘宝页面前的基础准备

文章目录

做淘宝页面前的基础准备
- 浏览器的默认加载策略
- 元素嵌套规则
- - 特殊元素(p标签和a标签)
- 基础补充
- - 导航栏布局
  - 文本元素
  - 行级元素
  - 实现导航栏左右浮动效果
  - 实现图标加文本加更多的展示
  - - linear-gradient() 定义与用法
  - 练习

浏览器的默认加载策略

当网站网速不高的时候，浏览器会屏蔽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倍行距*/
}