精华内容
下载资源
问答
  • 网站首页布局设计模板
    千次阅读 多人点赞
    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>
    
    

    ·布局成品

    在这里插入图片描述

    更多相关内容
  • 网站首页布局模板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网站设计布局模板

    千次阅读 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);
    }
    
    
    
    展开全文
  • Win8风格个人网站模板

    2021-06-01 21:34:46
  • 铅笔布局设计单页网站模板下载
  • HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
  • HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
  • HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
  • 关键字描述:设计 布局 风格 模板 社区 Discuz 7.0 适合 网络 论坛 人靠衣服马靠鞍,网络社区良好用户体验很大程度上来自模板设计。Discuz! 7.0模板风格布局模块化,降低了论坛模板设计的难度,只要修改几个图片...
  • 蓝色跟白色两列布局网站模板是一款创意产品设计公司网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
  • 经典布局设计公司网站

    热门讨论 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
    网站首页导航模板
  • 106.侧边固定2列布局HTML5模板 107.简洁白色风格HTML5模板 108.HTML5+CSS3咨询公司模板 109.灰色响应式CSS3单页模板 110.新媒体公司HTML5网页模板 111.html5单页图片摄影模板 112.html5+css3设计师博客模板 113.股票...
  • HTML5响应式装饰设计公司网站html静态模板
  • 70.html5+css3设计公司网站模板 71.Unify绿色响应式html5模板 72.ReStart商务企业模板 73.Flatty后台管理主题模版 74.Crystal Clear响应式HTML模版 75.商务咨询公司HTML5模板 76.色彩鲜艳的HTML5商务模板 77.永结...
  • HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
  • HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
  • HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
  • HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
  • HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
  • html网页设计模板
  • HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
  • 左侧导航布局CSS网页模板是一款适合做个人简介的CSS网页模板
  • HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
  • 餐厅模板布局设计师项目Макетдляверсткивзятотсюда: ://www.figma.com/file/YMLK4BwcowltWe0ZyLgOyrOp/Hunger---网站模板 node-id 16%3A48 Результатверсткиможно...
  • 简单的布局网站UI界面模板 psd素材下载 PSD、ui界面设计、web ui、web UI 界面设计网站模板、网页模板
  • HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,752
精华内容 15,900
关键字:

网站首页布局设计模板