CSS+HTML初学跟踪项目记录笔记【防丢失】（文章发布系统）

首先是笔记（未整理，可能有点乱）

复制代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>首页</title>
    <%--  定义页面样式--%>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: "微软雅黑" ;
        }

        /*定义header样式*/
        .header {
            height: 72px;
            background: #458fce;
        }

        .header .logo {
            color: #fff;
            line-height: 72px;
            font-size: 30px;
            /*margin属性
            用于设置元素的外边距，
            margin-left属性就是用于设置元素的左外边距*/
            /*
            相关的，还有
            auto
            浏览器设置的左外边距
            length
            定义固定的左外边距，默认值为0
            %
            定义基于父对象总高度的百分比左外边距
            inherit
            规定应该从父元素继承左外边距
            */
            margin-left: 20px;
            /*
            inline：内联元素、block：块元素
            inline-block
            和其它元素都在一行
            元素的高度、宽度、行高以及顶和底边距都可设置*/
            display:inline-block;
            font-weight:500 ;

        }
        ul li {
            list-style:none;
        }
        .header ul li {
            float: left ;
        }

        /*.header ul li {*/
        /*    !*    给每一个li添加一个左浮动*!*/
        /*    float: left;*/
        /*    color: #fff;*/
        /*    display: inline-block;*/
        /*    width: 112px;*/
        /*    height: 72px;*/
        /*    text-align: center;*/
        /*    line-height: 72px;*/
        /*    !*cursor属性规定要显示的光标的类型*/
        /*    default：默认光标（通常是一个箭头）*/
        /*    auto：默认，浏览器设置的光标*/
        /*    crosshair：光标呈现十字线*/
        /*    pointer：光标呈现为一只手*/
        /*    move：光标呈现某对象可移动*/
        /*    text：光标指示文本*/
        /*    wait：光标指示程序正在忙*!*/
        /*    cursor: pointer;*/
        /*    !*把li的小圆点去掉*!*/
        /*    list-style: none;*/
        /*}*/



        /*.header ul li.first {*/
        /*    margin-left: 30px;*/
        /*}*/

        /*a {*/
        /*    color: #336666;*/
        /*    text-decoration: none;*/
        /*}*/

        /*.header ul li :hover {*/
        /*    background: #74b0e2;*/
        /*}*/
    </style>
</head>
<body>
<%--div可以用来划分块级元素，从而配合css来整体控制某一块的样式--%>
<%--class代表类的意思，可以定义特定样式--%>
<div class="header">
        <div class="logo">原创文字</div>
    <ul>
        <li>首页</li>
        <li>原创故事</li>
        <li>热门专题</li>
        <li>欣赏美文</li>
        <li>赞助</li>
    </ul>
</div>

</body>
</html>
复制代码

首先在最开始就出现问题了，我应该实现的主界面应该是这样的

 

但是我的实现却是这样的

 

 logo的css样式实现不了，可笑的是（直接复制代码可以），之前可以实现，现在又不能了，md

找原因。。。

找到啦！

应该是：

 

 我写的是（实际上，是我不理解空格的意义，学习ing）

 

 第一步实现了，我是小白，我是小白，我的错误简单但是前路漫漫又灿灿

 

 接着添加导航按钮

OK，another problem md

本来应该出现的页面

 

 

我出现的页面（这也是我之前出现的问题，前面的问题纯属。。）

 

 不知道为啥，它就是上不去，md，这个问题我之前也是实现不了

找原因。。。

首先，我发现一开始，他就没有办法上去

我做的

 

 实际到这步应该是

 

 tmd

【为什么li也就是导航栏向左浮动不到header】

原因：（下面这个是原创文字的style代码）

复制代码
 .header .logo {
            color: #fff;
            line-height: 72px;font-size: 30px;
            margin-left: 20px;
            /*width: 200px;*/
            /*height: 80px;*/

            display: inline-block;
            /*text-align: center;*/
            /*line-height: 80px;*/
            float: left;
            font-weight: 500;
        }
复制代码

我没有加

float: left;
导致原创文字占了一行

然后，就初步实现了一个页面

 

 






 

本文作者：TranquilTimber

本文链接：https://www.cnblogs.com/gbrr/p/16861362.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   喝着农药吐泡泡o  阅读(106)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
➖
收起
🔑