HTML+CSS搭建书城页面（css阴影，css渐变、font-awesome）

业界资讯 2020-07-30 12:21:13 阅读次数: 0

利用css盒阴影，css渐变、font-awesome，HTML定位流等css知识配合HTML和css的基础知识，完成书城界面的搭建。

一、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马书城</title>
    <!--css代码-->
    <link rel="stylesheet" href="黑马书城.css">
    <!--font-awesome css代码-->
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<header>
</header>
<!--主体部分-->
<div class="meau">
    <!--导航标题-->
    <div class="nav">
        <!--font-awesom字体图标-->
        <i class="fa fa-book fa-3x"></i>
        <span>精选图书</span>
    </div>
</div>
<!--商品系列部分-->
<div class="items">
    <div class="item item_color">
        <h3>热销教材</h3>
        <img src="images/shopping/响应式web前端开发.jpg" alt="联系卖家" title="联系卖家">
    </div>
    <div class="item">
        <img src="images/shopping/Androd%20移动开发基础案例.jpg" alt="联系卖家" title="联系卖家">
        <p class="item_p">￥39.9</p>
        <P class="notobook">Androd 移动开发基础案例</P>
        <div class="item_comments">
            <a href="#">140+条评论</a>
            <span>黑马出版社</span>
            <span title="品质服务，放心购物">放心购</span>
        </div>
        <div class="shopping">
            <a href="#">
                <!--font-awesom字体图标-->
            <i class="fa fa-shopping-cart"></i>
            <span>加入购物车</span>
            </a>
        </div>
    </div>
    <div class="item">
        <img src="images/shopping/软件测试.jpg" alt="联系卖家" title="联系卖家">
        <p class="item_p">￥49.9</p>
        <P class="notobook">软件测试</P>
        <div class="item_comments">
            <a href="#">240+条评论</a>
            <span>黑马出版社</span>
            <span  title="品质服务，放心购物">放心购</span>
        </div>
        <div class="shopping">
            <a href="#">
                <!--font-awesom字体图标-->
                <i class="fa fa-shopping-cart"></i>
                <span>加入购物车</span>
            </a>
        </div>
    </div>
    <div class="item">
        <img src="images/shopping/Java%20EE企业级应用开发教程.jpg" alt="联系卖家" title="联系卖家">
        <p class="item_p">￥59.9</p>
        <P class="notobook">Java EE企业级应用开发教程</P>
        <div class="item_comments">
            <a href="#">60+条评论</a>
            <span>黑马出版社</span>
            <span  title="品质服务，放心购物">放心购</span>
        </div>
        <div class="shopping">
            <a href="#">
                <!--font-awesom字体图标-->
                <i class="fa fa-shopping-cart"></i>
                <span>加入购物车</span>
            </a>
        </div>
    </div>
    <div class="item">
        <img src="images/shopping/响应式web前端开发.jpg" alt="联系卖家" title="联系卖家">
        <p class="item_p">￥69.9</p>
        <p class="notobook">响应式web前端开发</p>
        <div class="item_comments">
            <a href="#">80+条评论</a>
            <span>黑马出版社</span>
            <span  title="品质服务，放心购物">放心购</span>
        </div>
        <div class="shopping">
            <a href="#">
                <!--font-awesome 字体图标-->
                <i class="fa fa-shopping-cart"></i>
                <span>加入购物车</span>
            </a>
        </div>
    </div>
</div>
<div class="items">
    <div class="item item_color">
        <h3>精品图书</h3>
        <img src="images/shopping/微信小程序开发教程.jpg" alt="联系卖家" title="联系卖家">
    </div>
    <div class="item">
        <img src="images/shopping/Python.jpg" alt="联系卖家" title="联系卖家">
        <p class="item_p">￥69.9</p>
        <p class="notobook">Python</p>
        <div class="item_comments">
            <a href="#">140+条评论</a>
            <span>黑马出版社</span>
            <span title="品质服务，放心购物">放心购</span>
        </div>
        <div class="shopping">
            <a href="#">
                <!--font-awesom字体图标-->
                <i class="fa fa-shopping-cart"></i>
                <span>加入购物车</span>
            </a>
        </div>
    </div>
    <div class="item">
        <img src="images/shopping/Spring%20Boot%20企业级开发教程.jpg" alt="联系卖家" title="联系卖家">
        <p class="item_p">￥59.9</p>
        <p class="notobook">Spring Boot 企业级开发教程</p>
        <div class="item_comments">
            <a href="#">50+条评论</a>
            <span>黑马出版社</span>
            <span title="品质服务，放心购物">放心购</span>
        </div>
        <div class="shopping">
            <a href="#">
                <!--font-awesom字体图标-->
                <i class="fa fa-shopping-cart"></i>
                <span>加入购物车</span>
            </a>
        </div>
    </div>
    <div class="item">
        <img src="images/shopping/Vue.js前端开发实战.jpg" alt="联系卖家" title="联系卖家">
        <p class="item_p">￥79.9</p>
        <p class="notobook">js前端开发实战</p>
        <div class="item_comments">
            <a href="#">240+条评论</a>
            <span>黑马出版社</span>
            <span  title="品质服务，放心购物">放心购</span>
         </div>
        <div class="shopping">
            <a href="#">
                <!--font-awesom字体图标-->
                <i class="fa fa-shopping-cart"></i>
                <span>加入购物车</span>
            </a>
        </div>
    </div>
    <div class="item">
        <img src="images/shopping/大数据项目实战.jpg" alt="联系卖家" title="联系卖家">
        <p class="item_p">￥139.9</p>
        <p class="notobook">大数据项目实战</p>
        <div class="item_comments">
            <a href="#">140+条评论</a>
            <span>黑马出版社</span>
            <span  title="品质服务，放心购物">放心购</span>
        </div>
        <div class="shopping">
            <a href="#">
                <!--font-awesom字体图标-->
                <i class="fa fa-shopping-cart"></i>
                <span>加入购物车</span>
            </a>
        </div>
    </div>
</div>
</body>
</html>

二、css代码

header{
}
/*主体部分设置*/
.meau{
    width: 100%;
    height: 60px;
    margin: 20px auto;
    border: 1px solid #82847e;
}
/*标题导航设置*/
.nav{
    width: 160px;
    margin: 0 auto;
}
.meau span{
    /*转化为块状元素*/
    display: block;  
    float: right;
    font:  bolder  25px "新宋体";
    line-height: 60px;
    margin: 0;
}
/*font-awesome 字体图标设置*/
.fa-book{
    padding-top: 5px;
    color: #b2d3ff;
}
/*图书系列设置*/
.items{
    width:1400px;
    height: 450px;
    background-color: #ffffff;
    margin: 0 auto;

}
/*放置图书信息盒子设置*/
.item{
    width:220px;
    height:380px;
    float: left;
    margin: 25px;
    text-align: center;
    /*给class=.item的盒子添加阴影*/
    box-shadow: 10px 10px 10px #bec5c8;
    border-radius: 5px ;

}
/*鼠标悬停时，该区域的显示的效果*/
.item:hover{
    /*外边框*/
    border: 1px solid #a0a29c;
    /*给盒子的顶点添加一个弧度 为5px*/
    border-radius: 5px ;
}
/*给选中的盒子添加渐变色*/
.item_color{
    /*渐变色为重上向下渐变，颜色为#09cac5 30%，#09cac5 30%*/
    background-image: linear-gradient(to bottom , #09cac5 30%, #09cac5 30%);
}
.item img{
    padding: 10px;
}
.item_p{
    font:bold 20px "Microsoft YaHei UI Light";
    margin:0;
    margin-bottom: 10px;
    color: red;
    text-align:left;
    text-indent: 1rem;
}
.notobook{
    font:bold 15px "华文仿宋";
    margin:0;
    text-align:left;
    /*首航缩进1rem*/
    text-indent: 1rem;
}
.item h3{
    font-size: 20px;
}
.item_comments{
    width: auto;
    height: 20px;
    font:bold 13px "华文仿宋";
    text-align:left;
    /*首航缩进1rem*/
    text-indent: 1rem;
    color: #9ba3a6;
}
.item_comments a{
    /*去掉a标签的下划线*/
    text-decoration: none;
    color: #9ba3a6;
}
.item_comments span{
    /*转换为块状元素*/
    display: block;
}
.shopping{
    width: 80px;
    height: 23px;
    /*采用相对定位的定位方式*/
    position: relative;
    top:32px;
    left: 1rem;
    border: 1px solid #a0a0a0;
}
.shopping span{
    font-size: 12px;
    font-family: "华文仿宋";
}
.shopping a{
    text-decoration: none;
}

三、网页搭建完成后的截图

在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44989801/article/details/107629805
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022