博客前端自学笔记

最新推荐文章于 2022-01-30 19:35:39 发布

VIP文章趁你还年轻！

最新推荐文章于 2022-01-30 19:35:39 发布

阅读量239

点赞数 1

文章标签：前端博客 js css html

本文链接：https://blog.csdn.net/weixin_43131497/article/details/88724409

版权

Day1：
学完了html、css和js的基础知识，从今天开始自己结合所学知识跟视频做一个博客的前端
第一步是创建出来index.html和index.css，这个就不详细描述了，直接上代码

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/base.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="header">
        <div class="logo">
            <img src="img/logo.gif" alt="">
        </div>
        <div class="personal">
            个人中心
            <ul>
                <li><a href="#">设置</a></li>
                <li><a href="#">换肤</a></li>
                <li><a href="#">帮助</a></li>
                <li><a href="#">退出</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

css：

body{
    padding: 0px;
    margin: 0px;
    background: url(../img/header_bg.png) repeat-x;
    font-size: 12px;
    color:#333;
}
ul{
    padding: 0px;
    margin: 0px;
}
ul li{
    list-style-type: none;
}
#header{
    width:900px;
    height: 30px;
    margin: 0 auto;
}
#header .logo{
    display: block;
    float: left;
}
#header .personal{
    background: red;
    width: 70px;
    height: 30px;
    float: right;
    line-height:30px;
    background: url("../img/arrow.png") no-repeat 55px center;
    cursor:pointer;
}
#header ul{
    position: absolute;
    top:30px;
    left:1130px;
    background: #FBF7E1;
    width: 100px;
    height: 110px;
    border: 1px solid #999;
    border-top: none;
    padding:10px 0 0 0;
    display: none;
}
#header ul li {
    height:25px;
    line-height: 25px;
    text-indent: 30px;
    letter-spacing: 10px;
}
#header ul li a{
    text-decoration: none;
    color: #333;
    display: block;
    background: url(&

最低0.47元/天解锁文章

趁你还年轻！

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
博客前端自学笔记

Day1：学完了html、css和js的基础知识，从今天开始自己结合所学知识跟视频做一个博客的前端第一步是创建出来index.html和index.css，这个就不详细描述了，直接上代码html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt...
复制链接

扫一扫