图书·儿童

最新推荐文章于 2024-08-26 22:59:32 发布

梦逸雨涵

最新推荐文章于 2024-08-26 22:59:32 发布

阅读量183

点赞数

分类专栏： web 文章标签： web html css

本文链接：https://blog.csdn.net/qq_41943578/article/details/88959314

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

题目：

请做出如下的盒子

效果如：http://www.dangdang.com/

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书</title>
</head>
<style>
    *
    {
        margin: 0;
        padding: 0;
    }
    body
    {
        padding: 50px;
    }
    .container 
    {
        height: 550px;
        width: 250px;
    }
    .box1
    {
        font-size: 24px;
        padding-bottom: 3px;
        border-bottom: 2px solid #FA5000;
    }
    .box1 span
    {
        background-color: #323232;
        padding: 2px 8px 2px 8px;
        margin-right: 8px;
        color: #fff;
    }
    .box1 a
    {
        color: #323232;
        font-weight: bolder;
        font-family: 宋体;
        text-decoration-line: none;
    }
    .container .box2
    {
        height: 500px;
        width: 237px;
        border:2px solid #E5E5E5 ;
    }
    ul
    {
        list-style:none; 
    }
    ul li
    {
        float: left;
    }
    ul li a 
    {
            width: 237px;          
            padding-left: 12px;
            font-size: 12px;
            list-style: none;
            width: 60px;
            float:left;
            padding-bottom: 10px;
            color: #646464;
            text-decoration-line: none;
    }
     a:hover{
        text-decoration: underline;
        color: #EE8429;
        cursor: pointer;
    }
</style>
<body>
    <div class="container">
        <div class="box1">
            <a href=""><span>9F</span>图书·童书</a>
        </div>
        <div class="box2">
            <img src="images/cjxsj_20140910.jpg">
            <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>
                <li><a href="#">历史</a></li>
                <li><a href="#">哲学宗教</a></li>
                <li><a href="#">青春文学</a></li>
            </ul>
        </div>
    </div>    
</body>
</html>

运行结果：

梦逸雨涵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图书·儿童

题目：请做出如下的盒子效果如：http://www.dangdang.com/代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图书</title></head>&...
复制链接

扫一扫

专栏目录