02-CSS基础与进阶-day14

最新推荐文章于 2024-04-21 14:50:59 发布

weixin_30387799

最新推荐文章于 2024-04-21 14:50:59 发布

阅读量71

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/HiJackykun/p/11087280.html

版权

html+css技术去实现一个静态网站
1 企业站
http://www.boyaa.com/ 首页
大家课后完成游戏http://www.boyaa.com/game.html
http://www.boyaa.com/news.html
2 电商类网站
京东淘宝天猫小米

================================================
*.psd
美工---------->前端开发人员--------->网页（PC+移动端页面）
*.png
================================================
1 网站是一系列网页的集合
2 网站目录结构
-boyaa
--*.html
--css文件夹管理css
--js文件夹管理js
--img文件夹管理图片
--font文件夹管理字体图标

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博雅首页</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<body>
    <!--Header部分开始-->
    <div class="header">
        <div class="inner_c">
            <h1 class="logo">
                <a href="index.html">博雅互动,手机游戏</a>
            </h1>
            <ul class="nav">
                <li class="current"><a href="index.html">首页</a></li>
                <li><a href="game.html">博雅游戏</a></li>
                <li><a href="news.html">博雅新闻</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">客服中心</a></li>
                <li><a href="#">投资者关系</a></li>
            </ul>
            <div class="join-us">
                <a href="#">加入我们</a>
            </div>
        </div>
    </div>
    <!--Header部分结束-->
    <!--banner部分开始-->
    <div class="banner">
        <ul>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>  
    <!--banner部分结束-->
</body>
</html>

common.css

/*
   公共类
*/
body {
    font-size: 14px;
    color: #444866;
    font-family: "Arial","微软雅黑","宋体";
}
a {
    text-decoration: none;
    color: #444866;
}

a:hover {
    color: #33b972;
}

.inner_c {
    width: 1000px;
    margin: 0 auto;
}

/*
   头部header部分
*/
.header {
    height: 58px;
    background-color: #000;
    background-color: #191d3a;
}

.header .logo {
    width: 205px;
    padding: 10px 0 0 20px; 
    float: left;
    /* background-color: red; */
}

.header .logo a {
    background: url(../img/logo.png) no-repeat;
    width: 157px;
    height: 35px;   
    display: block;
    text-indent: -9999em;
    overflow: hidden;
}

.header .nav {
    float: left;
    width: 654px;     
    overflow: hidden;
    border-left: 1px solid #252947;
}

.header .nav li {
    height: 58px;
    line-height: 58px;
    float: left;
    text-align: center;
    width: 85px;
    border-right: 1px solid #252947;   
}

.header .nav li a {
    color: #818496;
    display: block;
}

.header .nav li.current {
    background-color: #252947;
}

.header .nav li.current a {
    color: #fff;
}

.header .join-us {
    float: left;
    width: 100px;
    padding-top: 12px;
}

.header .join-us a {
    width: 98px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    background: #38b774;
    display: block;
    border-radius: 5px;
    border: 1px solid #3aca7a;
}

index.css

index.css

reset.css

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
ol,ul {
    list-style: none;
}

转载于:https://www.cnblogs.com/HiJackykun/p/11087280.html

weixin_30387799

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02-CSS基础与进阶-day14

html+css技术去实现一个静态网站1 企业站 http://www.boyaa.com/ 首页大家课后完成游戏http://www.boyaa.com/game.html http://www.boyaa.com/news.html2 电商类网站京东淘宝天猫小米========...
复制链接

扫一扫