做淘宝页面前的基础准备

好好学习_fighting

已于 2022-10-05 21:03:05 修改

阅读量282

点赞数 1

文章标签： javascript 前端 html

于 2022-09-25 15:52:59 首次发布

本文链接：https://blog.csdn.net/qq_40637729/article/details/127038967

版权

做淘宝页面前的基础准备

文章目录

做淘宝页面前的基础准备

浏览器的默认加载策略

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

好好学习_fighting

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
做淘宝页面前的基础准备

linear-gradient() 函数linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。/* 从上到下，蓝色渐变到红色 */ linear-gradient(blue , red);/* 渐变轴为45度，从蓝色渐变到红色 */ linear-gradient(45deg , blue , red);
复制链接

扫一扫