HTML 개발 블로그 등록 페이지 디자인 (1)

CSS 파일 소개

새 파일 만들기 reg.html 파일

먼저 웹 페이지 레이아웃을 분석합니다

QQ截图20161031151355.png

이것이 우리 페이지 완성 후의 효과입니다.

웹 페이지는 세 부분으로 나누어져 있습니다

머리, 몸통, 바닥 순으로 작성을 시작합니다.

헤드 탐색 모음 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
    
</head>
<body>
<div id="top">
    <div id="menu">
        <ul>
            <li><img src=/upload/course/000/000/004/5816f7b0056da728.png></li>
            <li><a href=""> 首页</a></li>
            <li><a href="">科技资讯</a></li>
            <li><a href="">心情随笔</a></li>
            <li><a href="">资源收藏</a></li>
            <li><a href="">图文图片</a></li>
            <li><a href="">留言板</a></li>
            <li class="mi" ><a href="">登陆</a>/<a href="">注册</a></li>
        </ul>
    </div>
</div>
</body>
</html>

div 상자를 만들고, 상자에 div를 중첩하고, 정렬되지 않은 목록을 사용하여 탐색을 만들고, 로고 이미지를 소개합니다.

CSS 파일 만들기

@charset "utf-8";
body{
    background-color: #F0F0F0;
}
*{
    border: 0px;
    padding: 0px;
    margin: 0px;
    font-size: 14px;
}
#top{
    width: 100%;
    height: 90px;
    background-color: white;
    border-bottom: 1px solid #bbbbbb;
}
#menu{
    width: 1000px;
    overflow: hidden;
    margin: 0 auto;
}

먼저 전역을 초기화하고 div, top 및 menu에 대해 두 개의 id 태그를 만들어 헤드의 너비와 높이, 전체 페이지 레이아웃의 너비와 높이를 각각 설정합니다. . 이런 식으로 아래와 같은 페이지를 얻게 됩니다

그런 다음 페이지 스타일을 수정하세요

#menu img{
    height: 90px;
}
#menu ul{
    list-style-type: none;
}

img의 높이를 수정하고 ul 시퀀스에서 형식을 제거하세요.

#menu ul li{
    float: left;
    height: 90px;
    line-height: 90px;
    margin-right: 50px;
}
#menu ul li a{
    color: black;text-decoration: none;
    display: inline-block;
}
#menu ul li a:hover{color: #FFD700;text-decoration: none}

li 태그를 설정하고, 부동 작업을 수행하고, 높이와 간격을 조정하고, display: inline-block을 사용하여 탐색 모음을 빠른 요소로 만듭니다. 밑줄을 제거하세요. 라벨 클릭 스타일을 변경하세요. 효과는 아래 그림과 같으며 헤드 네비게이션 바가 완성되었습니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册页面</title> <style> @charset "utf-8"; body{ background-color: #F0F0F0; } *{ border: 0px; padding: 0px; margin: 0px; font-size: 14px; } #top{ width: 100%; height: 90px; background-color: white; border-bottom: 1px solid #bbbbbb; } #menu{ width: 1000px; overflow: hidden; margin: 0 auto; } #menu img{ height: 90px; } #menu ul{ list-style-type: none; } #menu ul li{ float: left; height: 90px; line-height: 90px; margin-right: 50px; } #menu ul li a{ color: black;text-decoration: none; display: inline-block; } #menu ul li a:hover{color: #FFD700;text-decoration: none} </style> </head> <body> <div id="top"> <div id="menu"> <ul> <li><img src=https://img.php.cn/upload/course/000/000/004/5816f7b0056da728.png></li> <li><a href="index.html"> 首页</a></li> <li><a href="list.html">科技资讯</a></li> <li><a href="list.html">心情随笔</a></li> <li><a href="list.html">资源收藏</a></li> <li><a href="list.html">图文图片</a></li> <li><a href="list.html">留言板</a></li> <li class="mi" ><a href="">登陆</a>/<a href="">注册</a></li> </ul> </div> </div> </body> </html>

제출하다 코드 재설정

자동운전