精华内容
下载资源
问答
我要提问
  • 网站首页布局设计模板
    千次阅读 多人点赞
    2020-04-08 21:34:18

    网页布局模板

    ·css部分

    
<style>
        .header{
     	    width: 970px;
     	    height: 80px;
     	    margin: 0 auto;
     	    margin-bottom: 10px;/*要写在margin后面*/
        }
        .header .logo{
     	    float: left;
     	    width: 270px;
     	    height: 80px;
     	    background-color: #ffefd5;
        }
        .header .language{
     	    float: right;
     	    width: 137px;
     	    height: 30px;
     	    background-color: #ffdab9;
     	    margin-bottom: 8px;
        }
        .header .nav{
     	    float: right;
     	    width: 680px;
     	    height: 42px;
     	    background-color: #fff8dc;
        }
        .content{
     	    width: 970px;
     	    height: 435px;
     	    margin: 0 auto; 
        }
        .content .ad{
        	float: left;
        	width: 310px;
        	height: 435px;
        	background-color: #eed5b7;
        }
        .content .rightpart{
     	    float: left;
     	    width: 650px;
     	    height: 435px;
     	    margin-left:10px; 
        }
        .content .rightpart .up{
     	    width: 650px;
     	    height: 400px;
     	}
        .content .rightpart .link{
     	    width: 650px;
     	    height: 25px;
     	    margin-top:10px; 
     	    background-color: #fffacd;
        }
        .content .rightpart .up .up_1{
     	    float: left;
     	    width: 450px;
     	    height: 400px;
     	    margin-right: 10px;
        }
        .content .rightpart .up .gallary{
            float: left;
     	    width: 190px;
     	    height: 400px;
     	    background-color: #ffe4e1;
        }
        .content .rightpart .up .up_1 .news{
        	width: 450px;
        	height: 240px;
        	background-color: #ffc1c1;
        	margin-bottom: 10px;
        }
        .content .rightpart .up .up_1 .info{
        	width: 450px;
        	height: 110px;
        	background-color: #fff0f5;
        	margin-bottom: 10px;
        }
        .content .rightpart .up .up_1 .hot{
        	width: 450px;
        	height: 30px;
        	background-color: #eeb4b4;
        }
        .footer{
        	width: 970px;
        	height: 35px;
        	background-color: #eecfa1;
        	margin: 0 auto;
        	margin-top:10px;
        }
	</style>

    ·div部分

    
<body>
	<div class="header">
	    <div class="logo"></div>
	    <div class="language"></div>
	    <div class="nav"></div>
	</div> 
	<div class="content">
	    <div class="ad"></div>
	    <div class="rightpart">
	        <div class="up">
	            <div class="up_1">
	                <div class="news"></div>
	                <div class="info"></div>
	                <div class="hot"></div>
	            </div>
	            <div class="gallary"></div>
	        </div>
	        <div class="link"></div>
	    </div>
	</div>   
    <div class="footer"></div>
</body>

    ·布局成品

    在这里插入图片描述

    css html
    更多相关内容

  • 网站首页布局模板1

     千次阅读 2020-04-15 12:12:39
    最常见的网站首页布局准备代码原理 准备 说明： 参考腾讯云服务首页 （利用html页面定位到指定位置） 需要实现的效果 div内容用图片替代，背景图片准备dummyimage（一个很好的生成指定图片尺寸颜色的网站） ...

    最常见的网站首页布局

    准备

    说明：

    • 参考腾讯云服务首页 （利用html页面定位到指定位置）

    • 需要实现的效果 在这里插入图片描述

    • div内容用图片替代，背景图片准备dummyimage（一个很好的生成指定图片尺寸颜色的网站）

    代码

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<style>
        *{
            margin: 0;
       	}
        html,body{
            width: 100%;
            height: 100%;
        }
        .div1{
            width:100%;
            height: 100%;
            background: url(00e6ff.png);
            background-size: cover;
            text-align: center;
        }
        .div2{
            width:100%;
            height: 100%;
            background: url(5500ff.png);
            background-size: cover;
        }
        .div3{
            width:100%;
            height: 100%;
            background: url(fff700.png);
            background-size: cover;
        }
</style>


<body>
<section class="div1"><button onclick="goTo3();">跳转到第三张</button></section>
<section class="div2"></section>
<section id="three" class="div3"></section>
<section class="div2"></section>

</body>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script type="text/javascript">
    function goTo3() {
        $("html,body").animate({scrollTop: $("#three").offset().top}, 500);//定位到《静夜思》
    }
</script>
</html>

    记得把图片替换一下哦

    原理

    css动画跳转到指定位置
    div 铺满整个屏幕，背景图片自适应

    收起
    展开全文
    html css

  • HTML+css网站设计布局模板

     千次阅读 2022-04-09 16:34:43
    运行结果如下图： index.html 个人主页模板 标题一 标题二 header footer foot style.css @charset "utf-8"; /* CSS Document */ *{ margin: 0; } .nva{ width: 100%; height: 50px; position: fixed; border-...

     上下固定，左边固定，右边可以上下滑动，右侧有滑动条。
    为保证原创性，css部分不出。

    运行结果如下图：

    index.html

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人主页模板</title>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="#" />
</head>

    
<body>
    <div class="nva">
    	<img src="#" alt="">
    </div>
    <div class="header">
        <div class="left">
            <div class="card">
                <div class="photo"><img src="#" alt=" "></div>
                <h1>标题一</h1>
                <h2>标题二</h2>
            </div>
		</div>
       	<div class="right">
            <div class="rig_upper">header</div>
            <div class="rig_under">footer</div>
        </div>
        <div class="foot">
            foot
        </div>
    </div>
</body>
</html>

    style.css

    @charset "utf-8";
/* CSS Document */
*{
    margin: 0;
}
.nva{
    width: 100%;
    height: 50px;
    position: fixed;
    border-bottom: 2px solid #FFFFFF;
/*渐变色*/
	background: linear-gradient(500deg,#099，#099);
}
.nva img{
	width: 50px;
	height:50px;
    /* 绝对定位 */
    position: absolute;
    /*圆形高度*/
    border-radius: 50%;
    overflow: hidden;
}

.left{
    width: 300px;
    height: 80%;
    bottom: 0;
    top: 52px;
    /*固定位置*/
    position: fixed;
    display: flex;
    left: 0;
    border-right: 2px solid #FFFFFF;
    /*浮动*/
    float: left;
    background: linear-gradient(3500deg,#394A58,#3280B0);
}

.right{
    position: fixed;
    height: 80%;
    top: 52px;
    right: 0;
    bottom: 0;
    left: 302px;
    color: #FFFFFF;
    overflow-y: auto;
    background-color: #F5FF00;
}

.right .rig_upper{
    width: 100%;
    height: 270px;
    top: 51px;
    background: linear-gradient(500deg,#394A58,#3280B0);
}
.right .rig_under{
        border-top: 1px solid #FFFFFF;

    width: 100%;
    height: 750px;
    background: linear-gradient(500deg,#394A58,#3280B0);

}



.foot{
    width: 100%;
    height: 80px;
    bottom: 0;
    position: fixed;
    color: #FFFFFF;
    border-top: 2px solid #FFFFFF;
	background: linear-gradient(500deg,#099,#369,#099);
}
    收起
    展开全文
    css3

  • Win8风格个人网站模板

     2021-06-01 21:34:46
    收起

  • 铅笔布局设计单页网站模板下载

     2021-04-02 21:23:18
    铅笔布局设计单页网站模板下载
    收起

  • 大学生图书馆网页设计模板代码 DIV布局书店网页作业成品 学校书籍网页制作模板 学生简单书籍阅读网站设计...

     2022-08-10 12:50:26
    HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
    收起

  • 大学生体育运动网页设计模板代码 DIV布局校园运动网页作业成品 HTML学校网页制作模板 学生简单体育运动网站...

     2022-08-10 12:49:33
    HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
    收起

  • 学校介绍静态HTML网页设计作品 DIV布局学校官网模板代码 DW大学网站制作成品下载 HTML5期末大作业

     2022-08-10 19:20:22
    HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
    收起

  • Discuz! 7.0模板风格布局模块化设计

     2020-09-28 18:18:34
    关键字描述：设计 布局 风格 模板 社区 Discuz 7.0 适合 网络 论坛　人靠衣服马靠鞍，网络社区良好用户体验很大程度上来自模板的设计。Discuz! 7.0模板风格布局模块化，降低了论坛模板设计的难度，只要修改几个图片...
    收起

  • 蓝色跟白色两列布局网站模板

     2021-03-20 06:17:00
    蓝色跟白色两列布局网站模板是一款创意产品设计公司网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
    收起

  • 经典布局的设计公司网站

     热门讨论 2012-03-17 17:33:41
    经典布局的设计公司网站,DIV+CSS制作，简洁实用。
    收起

  • div+css网页布局设计模板源代码

     热门讨论 2011-04-09 19:02:00
    div+css网页布局设计模板源代码。比较精炼，纯div和css布局，色彩搭配的很好。共6个网站。
    收起

  • 网站首页导航模板

     2021-01-13 20:42:22
    网站首页导航模板
    收起

  • 30套移动开发HTML5网站设计模板HTML5网页模板设计素材资料4.zip

     2022-05-06 16:07:21
    106.侧边固定2列布局HTML5模板 107.简洁白色风格HTML5模板 108.HTML5+CSS3咨询公司模板 109.灰色响应式CSS3单页模板 110.新媒体公司HTML5网页模板 111.html5单页图片摄影模板 112.html5+css3设计师博客模板 113.股票...
    收起

  • HTML5响应式装饰设计公司网站html静态模板_如何做响应式布局

     2020-12-04 16:01:21
    HTML5响应式装饰设计公司网站html静态模板
    收起

  • 30套移动开发HTML5网站设计模板HTML5网页模板设计素材资料3.zip

     2022-05-06 16:05:54
    70.html5+css3设计公司网站模板 71.Unify绿色响应式html5模板 72.ReStart商务企业模板 73.Flatty后台管理主题模版 74.Crystal Clear响应式HTML模版 75.商务咨询公司HTML5模板 76.色彩鲜艳的HTML5商务模板 77.永结...
    收起

  • 简单的咖啡文化静态HTML网页设计作品 DIV布局咖啡馆文化网页模板代码 DW咖啡网站制作成品

     2022-08-10 16:30:41
    HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
    收起

  • 大学生化妆品网页设计模板代码 化妆美妆网页作业成品 学校美妆官网网页制作模板 学生简单html网站设计成品

     2022-08-10 12:34:33
    HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
    收起

  • 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载

     2022-08-10 12:37:12
    HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
    收起

  • HTML个人网页设计 我的班级网站设计与实现 大学生简单班级静态HTML网页设计作品 DIV布局班级网页模板代码

     2022-08-10 11:41:44
    HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
    收起

  • 简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW个人网站制作成品 web网页制作与实现

     2022-08-10 16:33:20
    HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
    收起

  • 漂亮的html+css网站模板、网页设计源码

     2018-12-02 19:49:24
    html网页设计模板 、
    收起

  • 简单家乡风景静态HTML网页设计作品 DIV布局家乡介绍网页模板代码 DW个人网站制作成品 web网页制作与实现

     2022-08-10 16:39:32
    HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
    收起

  • 左侧导航布局CSS网页模板

     2019-11-24 03:59:21
    左侧导航布局CSS网页模板是一款适合做个人简介的CSS网页模板。
    收起

  • 大学生静态HTML鲜花网页设计作品 DIV布局网上鲜花介绍网页模板代码 DW花店网站制作成品 web网页制作与实现

     2022-08-10 12:44:15
    HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
    收起

  • 餐厅模板：布局设计师项目

     2021-02-13 14:29:47
    餐厅模板布局设计师项目Макетдляверсткивзятотсюда： ://www.figma.com/file/YMLK4BwcowltWe0ZyLgOyrOp/Hunger---网站模板 node-id 16％3A48 Результатверсткиможно...
    收起
    CSS

  • 简单的布局的网站UI界面模板_psd素材下载.psd

     2020-12-28 10:18:13
    简单的布局的网站UI界面模板 psd素材下载 PSD、ui界面设计、web ui、web UI 界面设计、网站模板、网页模板
    收起

  • 大学生简单环保环境静态HTML网页设计作品 DIV布局环境介绍网页模板代码 DW学生环境网站制作成品下载 HTML5...

     2022-08-10 12:38:58
    HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,752
精华内容 15,900
热门标签
关键字：

网站首页布局设计模板