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

最新推荐文章于 2022-08-12 22:12:30 发布

A-莫天

最新推荐文章于 2022-08-12 22:12:30 发布

阅读量3.5k

点赞数 22

分类专栏： HTM基础知识与案例练习文章标签： html web html5 css3

本文链接：https://blog.csdn.net/weixin_44989801/article/details/107629805

版权

利用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

最低0.47元/天解锁文章

A-莫天

关注

22
点赞
踩
71

收藏

觉得还不错? 一键收藏
打赏
14
评论
HTML+CSS搭建书城页面（css阴影，css渐变、font-awesome）

利用css盒阴影，css渐变、font-awesome，HTML定位流等css知识配合HTML和css的基础知识，完成书城界面的搭建。一、HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>黑马书城</title>  <link rel="stylesheet"
复制链接

扫一扫