网页设计与开发-实验报告-6和8

最新推荐文章于 2024-09-09 13:46:41 发布

笨笨的企鹅

最新推荐文章于 2024-09-09 13:46:41 发布

阅读量407

点赞数

分类专栏： Web前端文章标签： css html css3

本文链接：https://blog.csdn.net/baiziyuandyufei/article/details/127519433

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

网页设计与开发-实验报告-6和8

网页设计与开发-实验报告-6和8
- 学生实验3

网页设计与开发-实验报告-6和8

学生实验3

设计图书类网站

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title>图书首页</title>
<style type="text/css">
    /*全局属性统一定义*/
    body{
        font-family: 宋体;
        font-size:14px;
        margin:0;
    }
    /* 大背景样式*/
    #container{
        margin:0 auto;
        width:900px;
    }
    /* 头部样式*/
    #header{
        height:200px;
        background: #6cf;
        margin-bottom: 5px;
    }
    /* 导航样式*/
    #menu{
        height:30px;
        background:#09c;
        margin-bottom: 5px;
    }
    #menu ul{
        list-style-type: none;
        overflow: hidden;
    }
    #menu li{
        float: left;
        width: 120px;
    }
    #menu a{
        display: block;
        text-align: center;
    }
    /* 主内容样式*/
    #mainContent{
        height:500px;
        /* background: #cff; */
        margin-bottom: 5px;
    }
    /*左边栏样式*/
    #leftsidebar{
        float: left;
        width:200px;
        height: 500px;
        /* background: #cf9; */
        text-align: center;
    }
    #leftsidebar ul{
        list-style: none;
        padding:0px;
        margin:0px;
        text-align: left;
    }
    #leftsidebar li{
        height:33px;
        
    }
    /* 内容栏样式*/
    #content{
        /* background: #ffa; */
        height:500px;
        margin:0 0 0 202px;
    }
    #pdBox{
        height:115px;
        /* background: #cff; */
        margin-bottom: 5px;
    }
    #pdPic{
        float: left;
        width:115px;
        height: 115px;
        background: red;
        text-align: center;
    }
    #pdPic img{
        width:115px;
        height:115px;
    }
    #pdInfo{
        /* background: blue; */
        height:115px;
        margin:0 0 0 132px;
    }
    #pdInfo p{
        font-size:20px;
        margin:5px;
    }
    #pdInfo ul{
        list-style: none;
        margin: 5px;
        padding:0px;
    }
    #pdInfo li{
        font-size:15px;
    }
    /* 尾部样式*/
    #footer{
        height:60px;
        background: #6cf;
        text-align: center;
    }
    #footer span{
        display: block;
        width:260px;
        float:left;
        margin:20px;
    }
</style>
</head>
<body>
    <div id="container">
        <div id="header">
            <img src="img/header.jpg" width="900px" height="200px">
        </div>
        <div id="menu">
            <ul>
                <li><a>图书排行榜</a></li>
                <li><a>童书</a></li>
                <li><a>中小学用书</a></li>
                <li><a>小说</a></li>
                <li><a>文学</a></li>
                <li><a>青春文学</a></li>
                <li><a>艺术</a></li>
            </ul>
        </div>
        <div id="mainContent">
            <div id="leftsidebar">
                图书分类
                <ul>
                    <li>特色书单</li>
                    <li>教育</li>
                    <li>小说</li>
                    <li>文艺</li>
                    <li>青春文学/动漫幽默</li>
                    <li>童书</li>
                    <li>人文社科</li>
                    <li>经管</li>
                    <li>成功/励志</li>
                    <li>生活</li>
                    <li>科技</li>
                    <li>英文原版书</li>
                    <li>期刊/音像</li>
                    <li>创意文具</li>
                </ul>
            </div>
            <div id="content">
                <div id="pdBox">
                    <div id="pdPic"><img src="img/grzygrz.jpg"></div>
                    <div id="pdInfo">
                        <p>古人这样过日子</p>
                        <ul>
                            <li>作者：国家人文历史</li>
                            <li>出版社：四川人民出版社</li>
                            <li>出版时间：2022年9月</li>
                        </ul>
                    </div>
                </div>
                <div id="pdBox">
                    <div id="pdPic"><img src="img/400gjz.jpg"></div>
                    <div id="pdInfo">
                        <p>新东方 100个句子记完7000个雅思单词</p>
                        <ul>
                            <li>作者：俞敏洪</li>
                            <li>出版社：浙江教育出版社</li>
                            <li>出版时间：2020年03月</li>
                        </ul>
                    </div>
                </div>
                <div id="pdBox">
                    <div id="pdPic"><img src="img/ys.jpg"></div>
                    <div id="pdInfo">
                        <p>雅思词汇真经 学为贵IELTS考试教材</p>
                        <ul>
                            <li>作者：刘洪波</li>
                            <li>出版社：外语教学与研究出版社</li>
                            <li>出版时间：2018年11月</li>
                        </ul>
                    </div>
                </div>
                <div id="pdBox">
                    <div id="pdPic"><img src="img/hy.jpg"></div>
                    <div id="pdInfo">
                        <p>六层楼先生 怀孕呵护指南 第十一诊室</p>
                        <ul>
                            <li>作者：六层楼先生</li>
                            <li>出版社：浙江科学技术出版社</li>
                            <li>出版时间：2021年07月</li>
                        </ul>
                    </div>
                </div>
                
            </div>
        </div>
        <div id="footer">
            <span>正规渠道</span>
            <span>正品保证</span>
            <span>退换无忧</span>
        </div>
    </div>
</body>
</html>