新疆行知书

最新推荐文章于 2021-12-27 21:50:49 发布

anmian123hyl

最新推荐文章于 2021-12-27 21:50:49 发布

阅读量3.1k

点赞数 5

分类专栏： html 文章标签： html css

本文链接：https://blog.csdn.net/anmian123hyl/article/details/106435377

版权

HTML制作静态网页—新疆行知书
基本布局思路:
1.div块级标签布局
2.整个大容器container内, 从上到下分为六个小容器top, nav, left, middle, right, bottom
3.小容器里的内容采用无序列表填充
网页效果图
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新疆行知书</title>
    <style type="text/css">
        * {
    
            margin: 0;
            padding: 0;
        }
        #container {
    
            width: 780px;
            height: 880px;
            background-color: #123456;
            margin: 0 auto;
        }
        #top {
    
            width: 780px;
            height: 150px;
        }
        #nav {
    
            width: 780px;
            height: 33px;
        }
        #nav li {
    
            width: 78px;
            line-height: 33px;
            list-style: none;
            float: left;
        }
        #nav a {
    
            display: block;
            text-align: center;
            background-image: url("images/button1.jpg");
        }
        #nav a:hover {
    
            background-image: url("images/button1_bg.jpg");
        }
        #left {
    
            width: 200px;
            height: 655px;
            background-color: #5ea6eb;
            margin: 3px 1.5px 1.5px 3px;
            float: left;
        }
        #weather {
    
            width: 100%;
        }
        #weather h3 {
    
            width: 100%;
            height: 47px;
            text-align: center;
            background-image: url("images/weather.jpg");
            background-attachment: initial;
            font-size: 16px;
            color: white;
            border-bottom: 1px solid white;
        }
        #weather span {
    
            position: relative;
            top: 25px;
            left: 5px;
        }
        #weather li {
    
            font-size: 12px;
            line-height: 24px;
            text-align: center;
            color: white;
        }
        #weather ul {
    
            width: 190px;
            list-style: inside;
            list-style-image: url(images/icon1.gif);
            border-left: 5px solid white;
            border-right: 5px solid white;
        }
        #today {
    
            width: 190px;
            height: 487px;
            border-left: 5px solid white;
            border-right: 5px solid white;
            border-bottom: 5px solid white;
        }
        #today h3 {
    
            font-size: 16px;
            color: white;
            line-height: 30px;
            margin: 0 auto;
            background-color: #bbddff;
            background-image: url("images/icon2.gif");
            background-repeat: no-repeat;
            background-position: 5px 12px;
        }
        #today span {
    
            position: relative;
            left: 20px;
        }
        #today ul {
    
            list-style: none;
        }
        #today a {
    
            display: block;
            text-align: center;
            text-decoration: none;
        }
        #today img {
    
            margin-top: 10px;
        }
        .l1 a {
    
            font-size: 14px;
            line-height: 20px;
            color: white;
        }
        #middle {
    
            float: left;
            width: 358px;
            height: 650px;
            background-color: white;
            border: 5px solid white;
            margin: 3px 1.5px 1.5px 1.5px;
        }
        #middle>div:nth-child(1) {
    
            width: 100%;
            height: 260px;
            background-image: url("images/ghost.jpg")

最低0.47元/天解锁文章

anmian123hyl

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
新疆行知书

HTML制作静态网页—新疆行知书基本布局思路:1.div块级标签布局2.整个大容器container内, 从上到下分为六个小容器top, nav, left, middle, right, bottom3.小容器里的内容采用无序列表填充代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新疆行知书</title>
复制链接

扫一扫