今天也是充满希望的一天

最新推荐文章于 2024-09-23 17:12:42 发布

还未迟暮

最新推荐文章于 2024-09-23 17:12:42 发布

阅读量100

点赞数

文章标签： html web

本文链接：https://blog.csdn.net/m0_63122857/article/details/121701016

版权

本文档展示了百度首页的基本HTML结构和样式，包括Logo、导航栏、搜索框和底部信息，以及一个简单的相册布局。CSS样式定义了各部分的对齐方式、尺寸和颜色。相册部分包含多个摄影类别和图片展示，每个图片都有相应的描述。通过这个源码，读者可以了解网页基本结构和布局技巧。

摘要由CSDN通过智能技术生成

今天跟作了一个百度首页

<title>Document</title>
    <link rel="stylesheet" href="css/bddiv.css">
</head>
<body>
    <div class="logo"><img src="images/bdlogo.gif" /></div>
    <div class="nav"><a href="#">新 闻</a>&nbsp; <strong>网 页</strong>&nbsp;<a href="#"> 贴 吧</a> &nbsp;<a href="#">知 道</a> &nbsp;<a href="#">音 乐</a>&nbsp; <a href="#">图 片</a> &nbsp;<a href="#">视 频</a> &nbsp;<a href="#">地 图</a></div>
    <br />
    <div class="sousou"><input type="text" class="search"/>&nbsp;<input type="button" value="百度一下" class="btn"/></div><br />
    <br />
    <div class="more"><a href="#" >百科</a>　<a href="#">文库</a>　<a href="#" >hao123</a> | <a href="#" >更多&gt;&gt;</a></div><br />
    <br />
    <div class="map"><img src="images/ic.jpg" />&nbsp;<a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a></div><br />
    <br />
    <div class="bottom"><a href="#">把百度设为主页</a>&nbsp;<a href="#">安装百度卫士</a>
    <br />
    <a href="#">加入百度推广</a> | <a href="#">搜索风云榜</a> | <a href="#">关于百度</a> | <a href="#">About Baidu</a>
    <br />
    ©2013 Baidu 使用百度前必读 京ICP证030173号 </div>
</body>

这是源码其中要注意一下字体的变色然后下面是需要到的CSS

.logo{
    text-align:center;
}
.nav{
    font-size:14px; text-align:center;
}
.sousou{
    text-align:center;
}
.search{
    width:420px; height:23px;
}
.btn{
    height:30px; width:100px; font-size:14px;
}
.more{
    text-align:center; font-size:14px;
}
.map{
    text-align:center; font-size:12px;
}
.bottom{
    font-size:12px; text-align:center; line-height:30px;
}

然后这是一个相对简单的相册

<link rel="stylesheet" href="css/xcdiv.css">
</head>
<body>
    <div class="main">
        <div class="show_fenl clearfix">
            <ul>
                <li class="no_mar"><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 class="showpic clearfix">
            <ul>
                <li>
                    <a href="">
                        <img src="images/objpic07.jpg" />
                        <span>摄影艺术</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/objpic02.jpg" />
                        <span>摄影艺术</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/objpic03.jpg" />
                        <span>摄影艺术</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/objpic04.jpg" />
                        <span>摄影艺术</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/objpic05.jpg" />
                        <span>摄影艺术</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/objpic06.jpg" />
                        <span>摄影艺术</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/objpic01.jpg" />
                        <span>摄影艺术</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/objpic08.jpg" />
                        <span>摄影艺术</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/objpic09.jpg" />
                        <span>摄影艺术</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

这是相册相应的CSS

* {
    margin: 0;
    padding: 0;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clearfix {
    display: inline-table;
}

.clearfix {
    display: block;
}

ul {
    list-style: none;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}

a {
    color: #fff;
    text-decoration: none;
}

img {
    border: none;
}

.main {
    width: 96%;
    padding: 0 2%;
}

.show_fenl .no_mar {
    margin-left: 0px;
}

.show_right {
    width: 78%;
}

.locat {
    font-size: 18px;
    margin: 40px 0px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e1e1e1;
}

.locat a,
.show_fenl a {
    color: #333;
}

.locat a:hover {
    color: #5f6d7e;
}

.show_fenl {
    text-align: right;
}

.show_fenl ul li {
    float: left;
    background: #5f6d7e;
    margin: 10px;
    padding: 10px;
}

.show_fenl ul li a {
    font-size: 16px;
    color: #fff;
}

.show_fenl ul li a:hover {
    text-decoration: underline;
}

.showpic {
    margin: 30px 0px;
}

.showpic ul li {
    float: left;
    width: 32.4%;
    margin-right: 12px;
    margin-bottom: 12px;
}

.showpic ul li img {
    width: 100%;
    height: 218px;
}

.showpic ul li span {
    display: block;
    color: #333;
    text-align: center;
    background: #f1f1f1;
    padding: 10px 0px;
}

.showpic ul li span:hover {
    background: #e1e1e1;
}