前端：CSS/14/综合案例：传智首页

最新推荐文章于 2023-12-30 12:01:52 发布

原创

最新推荐文章于 2023-12-30 12:01:52 发布 · 538 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

写代码前的准备工作

1，项目草图

2，网页的背景色，背景图片；
3，网站主页的宽度：100px；
4，将所有图片素材复制到images文件夹下；
5，创建一个CSS文件（因为此项目的CSS代码较多，方便写入代码），并将该CSS文件引入到当前的HTML文件中；

开始写代码

CSS案例：传智首页.html文件内容如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS综合案例：传智首页</title>
    <link href="CSS\public.css" rel="stylesheet" type="text/css" /><!-- 引入CSS文件中的样式 -->
</head>

<body>
    <!-- top模块 -->
<div class="boxmax">
    <div class="top"><span>专业的IT培训机构</span>
    <ul>
        <li><a href="#" class="noline">就业宣言</a></li>
        <li><a href="#">报名流程</a></li>
        <li><a href="#" id="blue">免费公开课</a></li>
        <li><a href="#">中国好毕设</a></li>
        <li><a href="#">免费学习光盘</a></li>
        <li><a href="#" id="blue">原创教材</a></li>
        <li><a href="#">传智特刊</a></li>
        <li><a href="#">人才服务</a></li>
        <li><a href="#">技术论坛</a></li>
    </ul>
    </div>
    <!-- logo模块 -->
    <div class="logo">
        <div class="div1"><img src="images\th.jpg"/></div>
        <div class="div2"><h4>PHP学院</h4>
        <ul>
            <li><a href="#">北京校区</a></li>
            <li><a href="#" id="blue">上海校区</a></li>
            <li><a href="#">广州校区</a></li>
            <li><a href="#">武汉校区</a></li>
            <div class="clear"></div>
            <li><a href="#">郑州校区</a></li>
            <li class="liorange"><a href="#">西安校区</a></li>
            <li class="liorange"><a href="#">哈尔滨校区</a></li>
        </ul>
        </div>
        <div class="div3"><img src="images\th2.jpg"/></div>
    </div>
    <!-- menu主菜单模块 -->
    <div class="menu">
        <ul>
            <li><a href="#