CSS网站练习

最新推荐文章于 2024-07-16 13:45:20 发布

John_boom

最新推荐文章于 2024-07-16 13:45:20 发布

阅读量2.2k

点赞数 4

分类专栏： HTML/CSS 文章标签： css

本文链接：https://blog.csdn.net/John_boom/article/details/77890863

版权

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

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

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

阶段一

<!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><

最低0.47元/天解锁文章

John_boom

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
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
复制链接

扫一扫

专栏目录