html第四天网站首页的布局设计到实施

最新推荐文章于 2022-12-26 12:21:44 发布

qq_28629495

最新推荐文章于 2022-12-26 12:21:44 发布

阅读量5.5k

点赞数 4

分类专栏： html/css/div 文章标签： html 布局设计

本文链接：https://blog.csdn.net/qq_28629495/article/details/51334183

版权

这里写图片描述

项目布局：
index.html
images
|–index.css
|–reset.css

index代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./images/index.css">
    </head>
<body>
<!-- 页面布局 -->
<div id="matrix">
    <!-- 头部区域 -->
    <div id="header">
        <img src="./images/logo.jpg" alt = "" />
        <!-- 菜单导航 -->
        <div id="menu">
            <ul>
                <li class = "menu_li"><a href="#">首页</a></li>
                <li class = "menu_li"><a href="#">业务介绍</a></li>
                <li class = "menu_li"><a href="#">技术优势</a></li>
                <li class = "menu_li"><a href="#">精品案例</a></li>
                <li class = "menu_li"><a href="#">关于灵犀</a></li>
                <li class = "menu_li"><a href="#">文章观点</a></li>
                <li class = "menu_li"><a href="#">联系我们</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部区域 end -->

    <!-- 主体区域 -->
    <div id="main">
        <div id = "banner">

            <img src="./images/about_banner.jpg" alt="">
        </div>

        <!-- 主体左侧 -->
        <div id="lside">
            <!-- 标题区 -->
            <div class="subtitle">
                <img src="./images/circle.gif" alt="" id = "t1">
                <h1>核心业务</h1>
                <h2>MORE&gt;&gt;</h2>
            </div>
            <!-- 标题区 end--> 

            <!-- 左侧内容区 -->
            <div class="l_article">
                <h2>电子商务类网站建设</h2>
                <img src="./images/eshop_service.jpg" alt="">
                <ul>
                    <li>设计风格1</li>
                    <li>设计风格2</li>
                    <li>设计风格3</li>
                    <li>设计风格4</li>
                    <li>设计风格5</li>
                </ul>
            </div>
            <div class="l_article">
                <h2>新闻门户类网站建设</h2>
                <img src="./images/eshop_service.jpg" alt="">
                <ul>
                    <li