（html+css）一个完整的网页主页布局：logo+导航+banner+新闻列表...

最新推荐文章于 2025-03-05 18:46:38 发布

置顶

叫我熬夜资本家

最新推荐文章于 2025-03-05 18:46:38 发布

阅读量4.4w

点赞数 137

分类专栏： html+css入门网页制作文章标签： html css

本文链接：https://blog.csdn.net/qq_33569780/article/details/106205703

版权

效果图01

效果图02

index.html(主页-结构)

<!DOCTYPE html>
<!-- 声明文档类型-->
<html lang="en">
<!-- 确定语言形态 -->
<head>
    <meta charset="UTF-8">
<!--控制网页的编码格式 utf-8 国际性编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--控制视口比例以及缩放-->
    <title>首页</title>
    <!-- 先引入重置样式表和公共样式表以及主页样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
 <!-- 这个顺序引入更规范 -->

</head>

<body>
<!-- 这是网页的头部版心盒子 -->
    <div class="header_con">
<!-- h1里面放logo哦 -->
        <h1>
            <img src="./images/logoyes_03.jpg" alt="">
        </h1>
<!-- 头部右侧表单标签-->
        <form action="">
            <input type="text" class="search" value="SEARCH...">
            <div>
                <input type="button" class="btn">
            </div>
        </form>
    </div>
<!-- 导航栏平铺部分：会显示黑色啦 -->
    <div id="nav">
<!-- 导航栏版心部分 -->
        <div class="nav_con">
            <ul>
                <li class="margin-left"><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>
<!-- banner的平铺部分 -->
    <div id="banner">

        <div class="banner_con">
            <!-- <img src="./images/banner1_02.jpg"> -->
        </div>
    </div>
<!-- 新闻列表的版心部分 -->
    <div class="news_con">
<!-- 最左侧的盒子 -->
        <div class="news_l">
            <h3 class="news_title">公司新闻</h3>
            <ul class="news_list">
                <li>
                    <a>震惊！一小伙深夜在电脑屏幕前狂笑，原因竟是...</a>
                    <span>1998-09-15</span>
                </li>
                <li>
                    <a>震惊！一小伙深夜在电脑屏幕前狂笑，原因竟是...</a>

最低0.47元/天解锁文章