属性伪类及连接伪类

会整活的小李
132 阅读8分钟

使用 精灵图

使用 背景大小属性 ，设置背景图片的大小

项目结构搭建 和 基础公共样式规范

选择器扩展

链接伪类选择器

| 选择器语法 | 功能实现 |

| a:link{} | 选中a链接未访问 |

| a:visited{} |选中a链接访问过后的状态 |

|a:hover{}|选中鼠标悬停的状态|

|a:active{}|选中鼠标按下的状态|

    <style>
        a {
            text-decoration: none;
        }
        /* 1 未访问过的状态 */
        a:link {
            color: red;
        }
        /* 2 访问之后的状态 */
        /* 0001+0010 =0011 */
        a:visited {
            color: blue;
        }
        /* 3 鼠标悬停时候的状态 */
        a:hover {
            color: green;
        }
        /* 4 鼠标按下未弹起时的状态 */
        a:active {
            color: orange;
        }
        /* 伪类选择器权重是10 */
        /* 如果要实现以上4种伪类选择器生效 必须遵循 LVHA的写法 */
    </style>
</head>
<body>
    <a href="#">百度一下</a>
</body>

</html>

焦点伪类选择器

获得焦点的状态

只对表单元素有效

input:focus {
            background-color: pink;
        }

属性选择器

通常借助html属性来选择元素,通常用于input标签

选择具有att属性的E元素。

E[att]{}

选择具有att属性且属性值等于val的E元素。

E[att="val"]{}

    <style>
        /* 选中input标签都具有type属性选择出来 */
        /* input[type] {
            width: 300px;
            height: 50px;
            border: 3px solid red;
        } */
        /* 选中input标签都具有type属性并且属性值是text才选择出来 */
        /* 0001+0010= 0011 */
        input[type="text"] {
            width: 300px;
            height: 50px;
            border: 3px solid red;
        }
        /* 属性选择器的权重是10 */
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
</body>

</html>

精灵图

精灵图:

项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点:

减少服务器发送次数，减轻服务器的压力，提高页面加载速度

使用步骤:

1.创建一个盒子, 设置盒子的尺寸和小图尺寸相同

2.将精灵图设置为盒子的背景图片

3.修改背景图位置

​ 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

    <style>
        span {
            display: block;
            width: 40px;
            height: 32px;
            /* background-color: pink; */
            background-image: url(./images/pic.png);
            background-position: -40px 0;
        }

        /* 精灵图的核心是背景位置 一般情况下都取负值 */
        /* 往左往上负值 */
    </style>
</head>

<body>
    <!-- 
        1 创建一个盒子 设置盒子的尺寸与小图片大小一致
        2 使用精灵图作为盒子的背景图
        3 通过pxcook来测量背景图片的位置
     -->
    <span></span>
</body>

</html>

背景图大小

background-size:cover|contain|百分比|数字

    <style>
        .box {
            width: 1000px;
            height: 300px;
            background-color: orange;
            border: 2px solid #000;
            background-image: url(./images/jd.jpg);
            background-repeat: no-repeat;
            /* 背景图片大小 */
            /* background-size: 宽度 高度; */
            /*contain 背景图片等比例缩放  显示完整 有可能不能铺满整个盒子 */
            /* background-size: contain; */
            /* cover 背景图片等比例缩放  可以铺满盒子 背景图片可能显示不全*/
            /* background-size: cover; */
            /* 数字 1个值  代表宽度 高度默认auto 等比例缩放*/
            background-size: 400px;
            /* 数字 2 个值  第一个值表示 宽度 第二个值表示高度*/
            background-size: 400px 200px;
            /* 百分比 参考是盒子的宽高 */
            background-size: 50% 50%;
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

背景连写:

background:color image repeat position/size

文字阴影

text-shadow: 水平阴影 垂直阴影 模糊距离  阴影颜色;
text-shadow: -8px 0px 9px red;

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影面积 阴影颜色 内/外阴影 ;
box-shadow: 2px -10px 6px 5px rgba(0, 0, 0, .5) ;

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: auto;
            /* box-shadow: 水平阴影 垂直阴影 模糊距离 阴影面积 阴影颜色 内(inset)/外阴影; */
            box-shadow: -1px 8px 7px 3px rgba(0, 0, 0, .4);
            /* 默认的是外阴影(outset) 但是外阴影的属性值不能写,否则报错 */
        }
        .box:hover {
            /* box-shadow: -1px 8px 7px 3px rgba(0, 0, 0, .4) */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

过渡

过渡 就是让元素慢慢的发生变化,过渡通常搭配hover一起使用 transition属性给需要过渡的元素本身加

transition:过渡属性 过渡时间;

    <style>
        /* transition属性给需要过渡的元素本身加 */
        /* 谁做过渡给谁加 */
        .box {
            width: 200px;
            height: 150px;
            background-color: red;
            /* transition: 过渡属性 过渡时长; */
            /* 要宽度和高度也需要过渡  */
            /* 让所有的属性都发生过渡 中间逗号隔开 */
            /* transition: width 3s, height 3s; */
            /* all 让所有的属性都可以过渡 */
            /* 过渡时间的单位s不要忘了哦 */
            transition: all 2s;
        }
        .box:hover {
            width: 400px;
            height: 300px;
            background-color: green;
            /* 给hover状态设置 鼠标移入有过渡效果 移除没有效果 */
            /* transition: all 1s; */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

ico图标设置

网站地址:www.bitbug.net/

三步： 1.1制作ico图标 （第三方网站---www.bitbug.net/) 1.2把ico图标放在项目根目录 1.3在页面进行ico图标的引入, 在html页面头部<head></head>元素之间引入有

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="favicon.ico" />

小兔鲜项目

项目目录创建

1642920056994.png

index页面骨架

1642921554618.png

header 模块开发

1642922437192.png

 <header>
        <!-- 快捷导航 xtx-shortcut -->
        <div class="xtx-shortcut"></div>
                 <!-- xtx-main-nav -->
        <div class="xtx-main-nav"></div>
    </header>

样式:

.xtx-shortcut{
    height: 52px;
    background-color: #333;
}

头部快捷导航

1642923163193.png

结构:

<div class="xtx-shortcut">
            <div class="container">
                <ul class="fr">
                    <li><a href="#">请先登录</a></li>
                    <li>|</li>
                    <li><a href="#">免费注册</a></li>
                    <li>|</li>
                    <li><a href="#">我的订单</a></li>
                    <li>|</li>
                    <li><a href="#">会员中心</a></li>
                    <li>|</li>
                    <li><a href="#">帮助中心</a></li>
                    <li>|</li>
                    <li><a href="#">在线客服</a></li>
                    <li>|</li>
                    <li><a href="#">手机版</a></li>
                </ul>
            </div>
        </div>

样式:

/* xtx-shortcut */
.xtx-shortcut {
    height: 52px;
    line-height: 52px;
    background-color: #333;
}

.xtx-shortcut li {
    float: left;
    color: #666666;
}

.xtx-shortcut li:nth-child(even) {
    margin: 0 16px;
}

.xtx-shortcut li a {
    display: block;
    height: 52px;
    color: #dcdcdc;
    font-size: 14px;
}

快捷导航精灵图设置

精灵图使用步骤:

  1. 创建一个盒子
  2. 设置盒子大小为小图片大小
  3. 设置精灵图为盒子的背景图片
  4. 将小图片左上角坐标 取负值，设置给盒子的background-position：x y
/* 手机精灵图 */
.xtx-shortcut li:last-child a::before {
    display: inline-block;
    content: '';
    width: 11px;
    height: 16px;
    margin-right: 8px;
    margin-top: -3px;
    background-color: pink;
    background: url(../images/sprites.png) -160px -70px;
    vertical-align: middle;
}

头部主体导航

xtx-main-nav盒子区域

  1. logo:logo

  2. 导航:nav

  3. 搜索框:search

  4. 购物车:cart

以上4个盒子都要浮动

结构:

<div class="xtx-main-nav container">
            <div class="logo fl">logo</div>
            <div class="nav fl">nav</div>
            <div class="search fl">search</div>
            <div class="cart fl">cart</div>
        </div>

样式:

/* xtx-main-nav */
.xtx-main-nav {
    height: 130px;
    padding-top: 30px;
    background-color: pink;
}

主体导航logo

logo注意点:

  1. logo 里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
  2. h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。
  3. 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。

​ 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。

​ 方法2：直接给 font-size: 0; 就看不到文字了，京东的做法。

  1. 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了。

结构:

		<div class="logo fl">
                <h1>
                    <a href="#">小兔鲜</a>
                </h1>
            </div>

样式:

.logo {
    width: 207px;
    height: 70px;
    margin-left: 25px;
    /* background-color: blue; */
}
.logo h1 {
    width: 100%;
    height: 100%;
}
.logo a {
    display: block;
    height: 70px;
    background: url(../images/logo.png) no-repeat 0 0/100% 100%;
    font-size: 0;
}

主体导航列表nav

样式:

 <!-- nav -->
            <div class="nav fl">
                <ul>
                    <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>
                    <li><a href="#">洗护</a></li>
                    <li><a href="#">孕婴</a></li>
                    <li><a href="#">服装</a></li>
                </ul>
            </div>

结构:

/* nav */
.xtx-main-nav .nav {
    margin-left: 40px;
}

.xtx-main-nav .nav li {
    float: left;
    height: 70px;
    line-height: 70px;
    margin-right: 48px;
}

.xtx-main-nav .nav a:hover {
    color: #27ba9b;
    border-bottom: 1px solid #27ba9b;
    padding-bottom: 8px;
}

主体导航搜索search

结构:

<!-- search -->
            <div class="search fl">
                <input type="search" placeholder="搜一搜">
            </div>

样式:

/* search */
.search {
    position: relative;
    width: 172px;
    height: 30px;
    margin-top: 24px;
    margin-left: 34px;
    background-color: skyblue;
}

.search input {
    width: 172px;
    height: 30px;
    padding-left: 31px;
    border-bottom: 2px solid #e7e7e7;
}

.search input::placeholder {
    color: #cccccc;
}

.search::before {
    content: '';
    position: absolute;
    left: 2px;
    bottom: 10px;
    width: 18px;
    height: 18px;
    background: url(../images/sprites.png) -80px -70px;
}

主体导航购物车cart

结构:

<div class="cart fl">
                <span>2</span>
</div>

样式:

.cart {
    position: relative;
    width: 23px;
    height: 23px;
    margin-top: 28px;
    margin-left: 15px;
    background-color: blue;
    background: url(../images/sprites.png) -120px -70px;
}

.cart span {
    /* 子绝父相 */
    position: absolute;
    left: 15px;
    top: -5px;
    width: 20px;
    height: 15px;
    background-color: #e26237;
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 15px;
    border-radius: 8px;
}

footer 模块开发

1642983991282.png

footer区域构成:

①.xtx-contact

②.xtx-service

③.xtx-copyright

 <footer>
        <!-- section 区块  -->
        <!-- 联系方式 -->
        <section class="xtx-contact"></section>
        <!-- 宣传服务 -->
        <section class="xtx-service"></section>
        <!-- 版权信息 -->
        <section class="xtx-copyright"></section>
    </footer>
    <!-- 底部模块结束啦 -->

xtx-contact布局分析

1642984218722.png

<!-- 联系方式 -->
        <section class="xtx-contact">
            <div class="container">123</div>
        </section>

/* 联系方式 */
.xtx-contact {
    height: 302px;
    background-color: blue;
}

.xtx-contact .container {
    height: 302px;
    background-color: pink;
}

xtx-service布局分析

1642986228162.png

 <!-- 宣传服务 -->
        <section class="xtx-service">
            <div class="container">
                <a href="#">价格亲民</a>
                <a href="#">物流快捷</a>
                <a href="#">品质新鲜</a>
            </div>
        </section>

/* 宣传服务 */
.xtx-service {
    height: 175px;
    background-color: #333;
}

.xtx-service .container {
    width: 1393px;
    height: 175px;
    border-bottom: 1px solid #434343;
}

.xtx-service a {
    float: left;
    height: 175px;
    width: 33.33%;
    font-size: 28px;
    color: #fff;
    line-height: 175px;
    text-align: center;
    /* background-color: orange; */
}

.xtx-service a::before {
    display: inline-block;
    content: '';
    width: 58px;
    height: 58px;
    vertical-align: middle;
    margin-right: 15px;
    /* background-color: green; */
    background: url(../images/sprites.png);
}

.xtx-service a:nth-child(2)::before {
    background-position: -130px 0;
}

.xtx-service a:nth-child(3)::before {
    background-position: -65px 0;
}

xtx-copyright布局分析

1642989823788.png

<!-- 版权信息 -->
        <section class="xtx-copyright">
            <div class="container">
                <p>
                    <a href="#">关于我们</a>|
                    <a href="#">帮助中心</a>|
                    <a href="#">售后服务</a>|
                    <a href="#">配送与验收</a>|
                    <a href="#">商务合作</a>|
                    <a href="#">搜索推荐</a>|
                    <a href="#">友情链接</a>
                </p>
                <p>CopyRight @ 小兔鲜儿</p>
            </div>
        </section>

.xtx-copyright {
    height: 170px;
    padding-top: 40px;
    background-color: #333;
    text-align: center;
    color: #999999;
    font-size: 14px;
}

.xtx-copyright P:nth-child(1) {
    margin-bottom: 20px;
}

.xtx-copyright P:nth-child(1) a {
    color: #999999;
    margin: 0 10px;
}

网站入口 xtx-entry 部分开发

1642990026978.png

xtx-entry大盒子搭建

<div class="xtx-entry ">
        <div class="container">
            <!-- 焦点图 -->
            <ul>
                <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
            </ul>
        </div>
    </div>

.xtx-entry {
    height: 500px;
    background-color: #f5f5f5;
}

.xtx-entry .container {
    height: 500px;
    background-color: green;
}

xtx-entry侧边栏

 <!-- 侧边栏 -->
          <aside class="aside">
                <ul>
                    <li><a href="#">生鲜 <span>水果</span> <span>蔬菜</span></a></li>
                    <li><a href="#">生鲜 <span>水果</span> <span>蔬菜</span></a></li>
                    <li><a href="#">生鲜 <span>水果</span> <span>蔬菜</span></a></li>
                    <li><a href="#">生鲜 <span>水果</span> <span>蔬菜</span></a></li>
                    <li><a href="#">生鲜 <span>水果</span> <span>蔬菜</span></a></li>
                    <li><a href="#">生鲜 <span>水果</span> <span>蔬菜</span></a></li>
                    <li><a href="#">生鲜 <span>水果</span> <span>蔬菜</span></a></li>
                    <li><a href="#">生鲜 <span>水果</span> <span>蔬菜</span></a></li>
                    <li><a href="#">生鲜 <span>水果</span> <span>蔬菜</span></a></li>
                    <li><a href="#">生鲜 <span>水果</span> <span>蔬菜</span></a></li>
                </ul>
            </aside>

/* aside */
.aside {
    /* 子绝父相 */
    position: absolute;
    left: 0;
    top: 0;
    width: 251px;
    height: 500px;
    background-color: rgba(0, 0, 0, .3);
}

.aside ul li {
    height: 50px;
    line-height: 50px;
    padding-left: 36px;
}

.aside ul li a {
    display: block;
    height: 50px;
    font-size: 16px;
    color: #fff;
}

.aside ul li span {
    font-size: 14px;
}

.aside span:first-child {
    margin-left: 15px;
}

.aside ul li:hover {
    background-color: #27ba9b;
}
.aside ul li a::after {
    position: absolute;
    right: 19px;
    top: 19px;
    content: '';
    width: 6px;
    height: 11px;
    background-color: pink;
    background: url(../images/sprites.png) -80px -110px;
}

xtx-entry左右箭头

 <a href="#" class="prev"></a>
 <a href="#" class="next"></a>

.prev {
    position: absolute;
    left: 260px;
    top: 228px;
    width: 45px;
    height: 45px;
    background: url(../images/sprites.png) 13px -60px;
    background-color: rgba(0, 0, 0, .2);
    border-radius: 50%;
}

.next {
    position: absolute;
    right: 10px;
    top: 228px;
    width: 45px;
    height: 45px;
    background: url(../images/sprites.png) -20px -60px;
    background-color: rgba(0, 0, 0, .2);
    border-radius: 50%;
}

xtx-entry轮播指示器

<!-- 轮播指示器 -->
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>

.xtx-entry ol {
    position: absolute;
    left: 680px;
    bottom: 31px;
    width: 110px;
    height: 10px;
    /* background-color: pink; */
}

.xtx-entry ol li {
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 15px;
    background-color: rgba(255, 255, 255, .43);
    cursor: pointer;
}

.xtx-entry ol li:last-child {
    margin-right: 0;
}

.xtx-entry ol li:nth-child(3) {
    background-color: #fff;
}

新鲜好物面板模块

1643006558820.png

新鲜好物面板盒子搭建

 <section class="xtx-new-goods container">
        <!--goods-hd  -->
        <div class="goods-hd">12</div>
        <!-- goods-list -->
        <div class="goods-list">34</div>
    </section>

/* xtx-new-goods */
.xtx-new-goods {
    height: 520px;
    background-color: green;
}
.goods-hd {
    height: 115px;
    background-color: orange;
}
.goods-list {
    height: 405px;
    background-color: purple;
}

新鲜好物头部

<div class="goods-hd">
            <h2 class="fl">新鲜好物 <span>新鲜出炉 品质靠谱</span></h2>
            <a href="#" class="fr">查看全部</a>
        </div>

.goods-hd {
    height: 115px;
    line-height: 115px;
    background-color: orange;
}
.goods-hd h2 {
    height: 115px;
    font-size: 29px;
    font-weight: 400;
}
.goods-hd span {
    font-size: 16px;
    color: #999999;
}
.goods-hd a {
    font-size: 16px;
    color: #999999;
}
.goods-hd a::after {
    display: inline-block;
    content: '';
    width: 7px;
    height: 13px;
    margin-left: 13px;
    vertical-align: middle;
    /* background-color: green; */
    background: url(../images/sprites.png) 0 -110px;
}

新鲜好物面板列表盒子

 <div class="goods-list">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>

.goods-list li {
    float: left;
    width: 304px;
    height: 405px;
    background-color: #f0f9f4;
    margin-right: 8px;
}

.goods-list li:last-child {
    margin-right: 0;
}

新鲜好物列表内容

 <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h4>睿米无线吸尘器F8</h4>
                        <p> <em>¥</em> 899</p>
                    </a>

.goods-list li h4 {
    height: 40px;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 400;
    color: #333
}

.goods-list li p {
    font-size: 23px;
    color: #9a2e1f;
}

.goods-list li p em {
    font-size: 17px;
}

生鲜面板布局

1643014782774.png

生鲜面板盒子搭建

 <!-- xtx-fresh-goods开始啦 生鲜面板 -->
    <section class="xtx-fresh-goods container">
        <div class="fresh-goods-top">
            <h3 class="fl">生鲜</h3>
            <ul class="nav fl">导航</ul>
            <a href="#" class="fr">查看全部</a>
        </div>
        <div class="fresh-goods-content"></div>
    </section>

/* xtx-fresh-goods */
.xtx-fresh-goods {
    height: 705px;
    background-color: orange;
}

.fresh-goods-top {
    height: 95px;
    line-height: 95px;
    background-color: purple;
}

.fresh-goods-top .nav {
    margin-left: 670px;
}

.fresh-goods-content {
    height: 610px;
    background-color: green;
}

生鲜面板内容列表盒子搭建

 <div class="fresh-goods-content">
            <div class="goods-content-left fl">
                <img src="./uploads/fresh_goods_cover.png" alt="">
            </div>
            <div class="goods-content-right fr">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                </ul>
            </div>
        </div>

.goods-content-left {
    height: 610px;
    width: 240px;
    /* background-color: hotpink; */

}

.goods-content-right {
    height: 610px;
    width: 1000px;
    /* background-color: lime; */
}

.goods-content-right ul li {
    float: left;
    width: 242px;
    height: 304px;
    margin-left: 8px;
    margin-bottom: 3px;
    /* 解决鼠标经过盒子添加边框导致文字抖动问题 */
    border: 2px solid transparent;
    background-color: #fff;
}

.goods-content-right ul li:hover {
    border: 2px solid #27ba9b;
}
avatar
文章
阅读
粉丝