CSS网站练习

最新推荐文章于 2025-09-09 15:40:26 发布
原创 最新推荐文章于 2025-09-09 15:40:26 发布 · 2.3k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

这篇博客主要介绍了使用CSS进行网站样式设计的实战过程，包括阶段一和阶段二的具体效果展示，逐步完成了一个完整的网站界面。通过这个练习，读者可以深入理解CSS在构建网站视觉效果中的应用。

跟着做之前的博雅互动的网站

阶段一

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>博雅首页</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .cl{
            clear: both;
        }
        .inner_c{
            width: 1000px;
            margin: 0 auto;
        }
        body{
            font-size: 14px;
            font-family: "Microsoft YaHei","SimSun";
            height: 8888px;
        }
        .header{
            height: 58px;
            background: #191D3A;
        }
        .header .logo{
            float: left;
            margin-right: 40px;
        }
        .header .nav{
            float: left;
        }
        .header .nav ul{
            list-style: none;
        }
        .header .nav ul li{
            float: left;
            width: 100px;
            line-height: 58px;
            text-align: center;
            border-left: 1px solid #252947;
        }
        .header .nav ul li.last{
            border-right: 1px solid #252947;
        }
        .header .nav ul li a{
            display: block;
            height: 58px;
            color: #818496;
            text-decoration: none;
        }
        .header .nav ul li a.current{
            background: #252947;
            color:white;
        }
        .header .nav ul li a:hover{
            background: #252947;
            color: white;
        }
        .header .jrwm_box{
            float: left;
            padding-left: 48px;
            padding-top: 12px;
        }

        .banner{
            height: 465px;
            background: url(images/banner.jpg) no-repeat center top;
        }
        .content{
            padding-top: 50px;
        }
        .content .product{
            height: 299px;
            border-bottom: 1px solid #DBE1E7;
        }
        .content .product ul{
            list-style: none;
        }
        .content .product ul li{
            float: left;
            width: 218px;
            margin-right: 43px;
        }
        .content .product ul li.last{
            margin-right: 0;
            width:217px;
        }
        .content .product ul li img{
            width: 218px;
            height: 130px;
        }
        .content .product ul li.last img{
            width: 217px;
        }
        .content .product ul li h3{
            text-align: center;
            line-height: 38px;
            font-size: 14px;
            font-weight: bold;
        }
        .content .product ul li p.djbf{
            text-align: center;
            line-height: 16px;
        }
        .content .product ul li p.djbf a{
            font-size: 12px;
            color: #38B774;
            text-decoration: none;
            background: url(images/sanjiaoxing.png) no-repeat right 5px ;
            padding-right: 12px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="inner_c">
            <!--this is logo-->
            <h1 class="logo">
                <img src="images/logo.png" alt="" />
            </h1>
            <!--this is navigation-->
            <div class="nav">
                <ul>
                    <li><a href="#" class="current">首页</a></li>
                    <li><a href="#">博雅游戏</a></li>
                    <li><a href="#">博雅新闻</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">客服中心</a></li>
                    <li class="last"><a href="#">投资者关系</a></li>
                </ul>
            </div>
            <div class="jrwm_box">
                <a href="#" class="jrwm">
                    <img src="images/jrwm.png" alt="" />
                </a>
            </div>
        </div>
    </div>
    <div class="cl"></div>

    <div class="banner"></div>
    <!--内容区域-->
    <div class="content inner_c ">
        <div class="product">
            <ul>
                <li>
                    <p><img src="images/pro1.jpg" alt="" /></p>
                    <h3>BPT宣传片</h3>
                    <p class="djbf">
                        <a href="#">点击播放</a>
                    </p>
                </li>
                <li>
                    <p><img src="images/pro2.jpg" alt="" /></p>
                    <h3>BPT宣传片</h3>
                    <p class="djbf">
                        <a href="#">点击播放</a>
                    </p>
                </li>
                <li>
                    <p><img src="images/pro3.jpg" alt="" /></p>
                    <h3>BPT宣传片</h3>
                    <p class="djbf">
                        <a href="#">点击播放</a>
                    </p>
                </li>
                <li class="last">
                    <p><img src="images/pro4.jpg" alt="" /></p>
                    <h3>BPT宣传片</h3>
                    <p class="djbf">
                        <a href="#">点击播放</a>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

效果图：
这里写图片描述

阶段二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /*默认字体，这个属性能够继承，所以写给body*/
            font-family: "Microsoft YaHei","SimSun";
        }
        .header{
            /*这里没有width，因为这个盒子要通栏*/
            /*在标准流里面，div是一个块级元素，没有width相当于撑满父亲 */
            height: 58px;
            background-color: #191D3A;
        }
        .header .inner_c{
            width: 1000px;
            height: 58px;
            margin: 0 auto;
        }
        .header .inner_c h1{
            padding-left: 15px;
            width: 170px;
            height: 58px;
            float: left;
            padding-right: 40px;
        }
        .header .inner_c .nav{
            width: 607px;
            height: 58px;
            float: left;
        }
        .header .inner_c .nav ul{
            /*去掉小圆点*/
            list-style: none;
        }
        .header .inner_c .nav ul li{
            float: left;
            width: 100px;
            height: 58px;
            border-left: 1px solid #252947;
            text-align: center;
            line-height: 58px;
        }
        .header .inner_c .nav ul li.last{
            border-right:1px solid #252947;
        }
        .header .inner_c .nav ul li a{
            display: block;
            width: 100px;
            height: 58px;
            text-decoration: none;
            color:white;
            font-size: 14px;
        }
        .header .inner_c .nav ul li a:hover{
            background-color: #252947;
        }
        .header .inner_c .jrwm{
            float: left;
            width: 100px;
            height: 34px;
            background-color: #38B774;
            margin-left: 48px;
            position: relative;
            top: 12px;
            left: 0;
            text-align: center;
            line-height: 34px;
            color:white;
            text-decoration: none;
            font-size: 12px;
            /*圆角边框：*/
            border-radius: 4px;
        }
        .header .inner_c a.jrwm:hover{
            background-color: orange;
        }
        .cl{
            clear: both;
        }
        .banner{
            /*这个banner没有宽度，是因为要撑满父亲*/
            height: 463px;
            background:url(images/banner.jpg) no-repeat center top;
            position: relative;
        }
        .banner .circles{
            width: 120px;
            height: 16px;
            position: absolute;
            bottom: 18px;
            left: 50%;
            margin-left: -60px;
        }
        .banner .circles ol{
            padding-top: 3px;
            list-style: none;
        }
        .banner .circles ol li{
            float: left;
            width: 12px;
            height: 12px;
            _font-size:0;
            background:url(images/dian1.png) no-repeat;
            margin-right: 15px;
            /*让鼠标变为小手的形状*/
            cursor: pointer;
        }
        .banner .circles ol li.current{
            background:url(images/dian2.png) no-repeat;
        }
        .banner .circles ol li.last{
            margin-right: 0;
        }
        .content{
            /*这个content没有宽度，是因为要撑满父亲*/
            height: 700px;
            background:url(images/indexmainbg.jpg) no-repeat center bottom;
        }
        .content .inner_c{
            width: 1000px;
            height: 700px;
            margin: 0 auto;
            padding-top: 50px;
        }
        /*218+43+218+43+218+43+217*/

        .content .inner_c .product{
            height: 229px;
            border-bottom: 1px solid gray;
            position: relative;
        }
        .content .inner_c .product ul{
            list-style: none;
        }
        .content .inner_c .product ul li{
            float: left;
            width: 218px;
            height: 229px;
            margin-right: 43px;
        }
        .content .inner_c .product ul li.last{
            margin-right: 0;
            width: 217px;
        }
        .content .inner_c .product ul li img{
            width: 100%;
            height: 130px;
        }
        .content .inner_c .product ul li h3{
            line-height: 38px;
            font-size: 14px;
            text-align: center;
            font-weight: bold;
        }
        .content .inner_c .product ul li .djbf{
            /*文本居中，一定是加给盒子的，不能直接加给a*/
            /*让我内部的文本居中*/
            text-align: center;
        }
        .content .inner_c .product ul li .djbf a{
            line-height: 12px;
            font-size: 12px;
            color:green;
            text-decoration: none;
            padding-right: 10px;
            background: url(images/sanjiaoxing.png) no-repeat right center;
        }
        .content .inner_c .product .circles{
            width: 117px;
            height: 12px;
            background-color: white;
            position: absolute;
            bottom: -6px;
            left: 50%;
            margin-left: -59px;
        }
        .content .inner_c .product .circles ol{
            list-style: none;
            padding-left: 14px;
        }
        .content .inner_c .product .circles ol li{
            float: left;
            width: 12px;
            height: 12px;
            margin-right: 14px;
            background: url(images/dian1.png) no-repeat;
        }
        .content .inner_c .product .circles ol li.last{
            margin-right: 0;
        }
        .content .inner_c .product .circles ol li.current{
            background: url(images/dian2.png) no-repeat;
        }
        .content .inner_c .info{
            padding-top: 53px;
        }
        .content .inner_c .info .news{
            position: relative;
            float: left;
            width: 500px;
            background:url(images/bynewsbg.jpg) no-repeat;
            padding-top: 109px;
        }
        .content .inner_c .info .news ul{
            list-style: none;
            padding: 0 20px;
        }
        .content .inner_c .info .news ul li{
            line-height: 50px;
            border-bottom: 1px solid #E0E1E5;
        }
        .content .inner_c .info .news ul li span{
            font-size: 12px;
            color:#AFCCE4;
            margin-right: 22px;
        }
        .content .inner_c .info .news ul li a{
            color:#444866;
            text-decoration: none;
            font-size: 14px;
        }
        .content .inner_c .info .jobs{
            float: left;
            width: 500px;
            height: 313px;
            background:url(images/byhrbg3.jpg) no-repeat;
        }
        .content .inner_c .info .news .more{
            position: absolute;
            width: 66px;
            height: 28px;
            background: url(images/icons.png) no-repeat -7px -9px;
            text-indent: -999em;
            top: 39px;
            left: 218px;
        }
        .footer{
            height: 91px;
            background-color: #191D3A;
        }
        .footer .inner_c{
            width: 1000px;
            margin: 0 auto;
        }
        .footer .inner_c .left_part{
            float: left;
            width: 300px;
            height: 91px;
            line-height: 91px;
        }
        .footer .inner_c .left_part a{
            text-decoration: none;
            color:gray;
            font-size: 12px;
            line-height: 91px;
        }
        .footer .inner_c .right_part{
            float: left;
            width: 700px;
            height: 91px;
            text-align: right;
            color:gray;
            font-size: 12px;
        }
        .footer .inner_c .right_part .jinghui{
            width: 40px;
            position: relative;
            top: 20px;
        }
    </style>
</head>
<body>
    <div class="header">


        <div class="inner_c">
            <h1><img src="images/logo.png" /></h1>
            <div class="nav">
                <ul>
                    <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 class="last"><a href="#">网页栏目</a></li>
                </ul>
            </div>
            <a href="#" class="jrwm">加入我们</a>
        </div>
    </div>

    <div class="cl"></div>

    <div class="banner">

        <div class="circles">
            <ol>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li class="last"></li>
            </ol>
        </div>
    </div>

    <div class="content">
        <div class="inner_c">
            <div class="product">
                <ul>
                    <li>
                        <p>
                            <img src="images/gamepic1.jpg" alt="" />
                        </p>
                        <h3>BPT宣传片</h3>
                        <p class="djbf">
                            <a href="">点击播放</a>
                        </p>
                    </li>
                    <li>
                        <p>
                            <img src="images/gamepic1.jpg" alt="" />
                        </p>
                        <h3>BPT宣传片</h3>
                        <p class="djbf">
                            <a href="">点击播放</a>
                        </p>
                    </li>
                    <li>
                        <p>
                            <img src="images/gamepic1.jpg" alt="" />
                        </p>
                        <h3>BPT宣传片</h3>
                        <p class="djbf">
                            <a href="">点击播放</a>
                        </p>
                    </li>
                    <li class="last">
                        <p>
                            <img src="images/gamepic1.jpg" alt="" />
                        </p>
                        <h3>BPT宣传片</h3>
                        <p class="djbf">
                            <a href="">点击播放</a>
                        </p>
                    </li>
                </ul>
                <div class="circles">
                    <ol>
                        <li class="current"></li>
                        <li></li>
                        <li></li>
                        <li class="last"></li>
                    </ol>
                </div>
            </div>
            <div class="info">
                <div class="news">
                    <ul>

                        <li>
                            <span>09 / 28</span>
                            <a href="#">新闻内容新闻内容新闻内容新闻内容</a>
                        </li>
                        <li>
                            <span>09 / 28</span>
                            <a href="#">新闻内容新闻内容新闻内容新闻内容</a>
                        </li>
                        <li>
                            <span>09 / 28</span>
                            <a href="#">新闻内容新闻内容新闻内容新闻内容</a>
                        </li>
                        <li>
                            <span>09 / 28</span>
                            <a href="#">新闻内容新闻内容新闻内容新闻内容</a>
                        </li>
                    </ul>
                    <a href="#" class="more">MORE</a>
                </div>
                <div class="jobs"></div>
            </div>
        </div>
    </div>

    <div class="cl"></div>

    <div class="footer">
        <div class="inner_c">
            <div class="left_part">
                <a href="#">网站地图</a>
                <span>|</span>
                <a href="#">免责声明</a>
            </div>
            <div class="right_part">
                明天上课啊，别不来啊，明天不休息啊。JS第一天好好听课。CSS先放放，别激动。
                <img src="images/govIcon.gif" class="jinghui"/>
            </div>
        </div>
    </div>
</body>
</html>

完整界面：

这里写图片描述

css练习
ZhaoXuWen23的博客
01-29 207
伪类 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> a:link{ color: red; }{#初始值是红色#} a:visited { color: blue; }{
CSS入门 练习
DonkeyL's
02-19 2181
CSS入门 练习CSS练习1 -- 画三角形CSS练习2 -- 画太极 CSS练习1 – 画三角形 代码： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;style type="text/css&
20个学习CSS的绝佳网站
09-24
学习css的网站，方便大家学习交流网页制作技术
CSS完整学习指南：从入门、布局到动画与实战
最新发布
weixin_42107409的博客
09-09 1441
本CSS教程提供从零开始到精通的完整学习路径，包含8个渐进式模块：从基础概念、核心语法到盒子模型、定位、Flexbox布局等高级主题。课程采用"理论+实践"模式，每个模块都配有练习集，最终通过克隆亚马逊首页项目巩固所学。特别强调开发环境搭建（推荐VS Code）和现代CSS技术（如Flexbox、响应式设计）。教程适合零基础学习者，涵盖选择器、单位系统、定位、动画等核心知识，帮助学员建立完整的CSS知识体系并具备实战能力。
CSS练习-网页
qq_44125413的博客
02-16 539
*{ margin: 0px; padding: 0px; outline: none; } body{ background-color: #F4F4F4; } /* 顶部logo */ .top_box{ width: 1200px; background-color: white; margin: auto; } .top_box_left,.top_box_center,.top_box_riht{ float: left; height: 90px; } .top_box_lef
分享一下：推荐一个网站，练习CSS3
weixin_30216561的博客
09-28 470
点击打开 这是一个国外的CSS3的网站，CSS3新增的一些功能都可以演示，分享给大家。 转载于:https://www.cnblogs.com/kingwell/archive/2012/09/28/2707110.html
div css练习div css练习div css练习div css练习
04-20
本练习旨在通过使用div元素结合CSS来提升对页面布局和样式的理解与应用能力。 首先，`div`元素在HTML中是一个通用的容器，它可以包含其他HTML元素，常用于组织和划分页面结构。通过设置div的样式，我们可以控制其在...
简洁css布局练习dw网站模板下载
04-02
【标题】"简洁css布局练习dw网站模板下载"所涉及的知识点主要集中在网页设计与开发领域，特别是关于CSS（层叠样式表）的布局技巧、Dreamweaver（DW）的使用以及单页网站的设计概念。 首先，CSS是网页设计的核心技术...
Demo_CSS:CSS特效练习
03-15
本实践项目"Demo_CSS:CSS特效练习"提供了一个学习和提升CSS技能的平台。 在这个项目中，你可以通过一系列的示例来了解和掌握CSS的各种特效。首先，我们来看一下CSS的基本结构。CSS由选择器和声明组成，选择器指向你...
HTML+CSS-练习作业-学成在线网站.zip
01-01
HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业...
css:CSS基本练习模块
05-28
综上所述，这个CSS基础练习模块覆盖了从基本语法到实际布局的广泛内容，是学习和提高CSS技能的良好起点。通过实践这些知识点，你可以更好地理解和运用CSS，创造出更具吸引力和功能性的网页设计。
CSS练习
毕业才是起点
04-09 1213
实现效果图 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
css游戏练习基础网址
weixin_50680057的博客
09-16 697
css练习
好玩的 CSS - 40 个有趣的 CSS 学习网站
程序员成长指北
10-18 1864
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群???? 基础学习cssreference.io/[1] CSS 参考书chokcoco.g...
对于html和css初学者，你有什么值得推荐的简单的网页适合练习？
SiKi学院的博客
09-07 760
html和css方面个人认为主要是在于css的学习，变化最多的也在于css，下面主要是介绍一些css相关的练习网站及一些项目，希望对你有帮助~
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值