请选择 进入手机版 | 继续访问电脑版
收起左侧

小型个人博客项目-【原创】

[复制链接]

552

主题

569

帖子

1万

积分

管理员

站长

Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20

积分
16427

灌水之王

QQ
发表于 2017-5-18 19:02:36 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
2345截图20170518185732.png


部分截图

两个文件代码如下
index.html

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <link rel="stylesheet" type="text/css" href="css/index.css"/>
        </head>
        <body>
                <header>
                        <h1>先锋者IT论坛</h1>
                        <h4>专注it技术</h4>
                </header>
                <nav>
                        <ul>
                                <li><a href="">网络安全</a></li>
                                <li><a href="">操作系统</a></li>
                                <li><a href="">系统安全</a></li>
                                <li><a href="">网络防骗</a></li>
                        </ul>
                </nav>
                <div id="main"></div>
                <footer></footer>
        </body>
</html>




index.css

*{
        padding: 0;
        margin: 0;
}
header{
        background: #FFFFFF;
        width: 100%;
        padding:40px ;
        border: 1px solid orange;
}
header h1{
        margin-left: 10%;
        /*border: 1px solid red;*/
}
header h4{
        color: #999999;
        margin-left: 10%;
        /*border: 1px solid red;*/
       
}
nav{
        width: 100%;
        height: 60px;
        background: #222222;
}
nav ul{
        width: 1100px;
        height: 60px;
        margin-left: 10%;
        /*margin-right: 10%;*/
        line-height: 55px;
        /*background: green;*/
        display: block;
       
}
nav ul li{
        width: 78px;
        height: 60px;
        list-style: none;
        float: left;
        text-align: center;
        /*padding-top: 16px;*/
        padding-left: 16px;
        padding-right: 16px;
}
nav ul li a{
        text-decoration: none;
        color: white;
        /*background: green;*/
        /*padding-top: 30px;*/
        width: 100%;
        height: 60px;
        /*border: 1px solid red;*/
        display: block;
}
nav ul li a:hover{
        background: green;
}



注意:a标签如要设置高度、宽度等属性一定要转换成块级元素  也就是display:block;

还要设置好行高;


好,这是我博客的第一部分,后面持续更新




本文纯属原创!




上一篇:关于网站的一些公告
下一篇:小型个人博客项目-【原创】二
QQ:2424004764
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|申请友链|Archiver|手机版|小黑屋|客户端下载|先锋者IT论坛 ( 湘ICP备16007032号湘公网安备 43030202001052号

GMT+8, 2024-3-29 13:08 , Processed in 0.116064 second(s), 19 queries , File On.

Powered by Discuz! X3.3

© 2017 bbs.fologde.com. Template By Gstudio

快速回复 返回顶部 返回列表