网页的第二种复杂的布局

最新推荐文章于 2021-09-23 16:03:59 发布
最新推荐文章于 2021-09-23 16:03:59 发布
阅读量325 收藏
点赞数
分类专栏： css知识点 文章标签： 有点复杂的布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shisjieshoufu/article/details/79200324
版权

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "utf-8" >

< style type= "text/css" >


             *{
                 margin: 0;
                 padding: 0;
            }

             .box{
                 width: 980px;
                 height: 700px;
                 background-color: #D2E9F4;

                 margin: 0 auto;
            }

             .header{
                 height: 50px;
                 background-color: black;
            }

             .content{
                 height: 600px;
                 background-color: #46F3B6;
            }

             .l-cont{
                 width: 100px;
                 height: 600px;
                 background-color: #780ED7;
                 float: left;
            }

             .m-cont{
                 width: 780px;
                 height: 600px;
                 background-color: #CBE923;
                 float: left;
            }

             .r-cont{
                 width: 100px;
                 height: 600px;
                 background-color: blue;
                 float: left;
            }

             .top{
                 height: 300px;
                 background-color: #F25D0F;
            }

             .bot{
                 height: 300px;
                 background-color: #126812;
            }
< / style >
    
</ head >
< body >


     < div class= "box" >
     < div class= "header" ></ div >

     < div class= "content" >
                 < div class= "l-cont" ></ div >  
                 < div class= "m-cont" >
<!-- 这下面都是流布局，不是那个浮动，所以有时候在
css上面不需要设置，左或者右。
只需要颜色与设置高度 -->
                      < div class= "top" ></ div >
                      < div class= "bot" ></ div >
                 </ div >  
                 < div class= "r-cont" ></ div >

             </ div >

             < div class= "footer" ></ div >

     </ div >
</ body >
</ html >
御裔宸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个复杂页面该如何布局设计
lucky_girl11的博客
04-22 2466
很多产品的信息量很大，又因为各种各样的原因设计师不能对内容进行轻易删减。如果不好好整理信息，会让界面越来越凌乱。我们可以这样做：把需要展示的信息都列出来 先不考虑信息之间的关系和顺序，大致列出即可。主要信息一定要列出，优先级较低的信息不用100%覆盖也没有关系。以Facebook为例，首页需要展示的信息有： Logo、搜索、用户信息、导航、Explore功能列表、发帖发图、最新动态、朋友推荐、语
复杂的网页
feiwutuzi的博客
01-09 493
网页千变万化 非常复杂 但是涉及到java服务器的 却很少 当褪去这些美丽的外衣 剩下的 只不过是简单的 躯壳罢了  但是这些躯壳 让人感觉 却很健壮而且有用
062 ＜复杂网页＞ 的一些技巧2
WLB 的博客
09-23 69
首先:以下内容都学自B站尚硅谷课程,链接在此 链接在这: Web前端零基础入门HTML5+CSS3基础教程 盒子,浮动 设置框的尺寸,圆角,阴影,轮廓 box-sizing: 盒子尺寸 box-sizing: border-box 这样,width,height指定的就是盒子的内容区 + 内边距padding + 边框border的总大小了 默认时,它只是内容区的大小. border-radius: 圆角 可以分别指定4个角的圆角 border-radius: 10px 20px 30px 40p
百度前端学院-复杂的网页设计
weixin_34376562的博客
03-18 81
任务地址：http://ife.baidu.com/task/detail?taskId=9 点我直接飞机 想起来最近好久没有更新博客了，就把这个任务放上吧~ 百度前端技术学院，出了好几个题，这个应该是最麻烦的吧。。不能说是最难。花一段时间做完了跟大家交流交流。 在线预览点我，github源码点我 我ps挂了。看着他的预览图做的网页，真是醉了。不过看他们做的出了一些问题，也还有百度给的一些...
几个比较杂的网站
HkEndless的专栏
08-02 537
http://www.233.com/Java/jichu/20100317/09111367-3.html http://fanyingjie.bokee.com/3550174.html hibernate源码解析： http://www.lupaworld.com/code.php?mod=list&itemid=40&path=./hibernate_3.6.1/core/src
第二周作业.rar（网页布局与实现）
09-12
在这个第二周的作业中，重点是创建一个九月份的日历，这既是一个实用的功能，也是对网页布局技巧的实践应用。 首先，我们需要了解网页布局的基本类型，例如：流式布局、固定布局、响应式布局和网格布局。流式布局...
【移动端网页布局】Flex 弹性布局案例 ③
最新发布
03-06
在移动端网页设计中，Flex布局，全称是Flexible Box，是一种强大的盒模型布局方式，尤其适合处理复杂的、响应式的界面。本案例将深入探讨Flex布局的使用，通过实际的代码示例来阐述其核心概念和应用场景。 一、Flex...
CSS网页布局:网页页面结构化
09-27
通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML
CSS网页布局入门教程1：一列固定宽度
10-30
* 一列固定宽度是指网页布局中的一种基本结构，即将一列的宽度固定，高度可以自适应。 * 一列固定宽度的实现需要使用CSS的width和height属性。 * 一列固定宽度的优势在于可以使网页的布局更加简洁和美观。 知识点3...
CSS网页布局入门教程5：二列宽度自适应
10-30
由于左右栏都具有边框，因此其真实宽度超过了浏览器窗口的宽度，导致右栏被挤掉第二行显示。 五、实际应用中的注意事项 在实际应用中，我们可以通过避免边框及边距的使用，而达到左右与浏览器填满的效果。在以后的...
一个交互比较复杂的页面（1新增）
qq_42093488的博客
03-21 371
新增 jsp： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt"...
一个交互比较复杂的页面（2编辑）
qq_42093488的博客
03-21 449
编辑页面 jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fm...
做网站要成功，最难的是什么？
我的未来不是梦--程序员之路从这里开始
06-25 948
　　我的切身体会，做网站最难的是定位。　　当定好位，剩下的事情再苦再难对站长来说也是快乐。　　当一个人有做事的信心和能力，却不知道要做什么时是最痛苦的。　　当一个剑客找不到人PK的时候是最孤独的。　　当一个站长无法确定一个网站定位的时候是最彷徨的。　　站长失败的两大原因： 1 定位错误  2 缺乏坚持　　有一个经常被引用的故事：　　一个人挖井，10年先后挖了10眼井，没
常见的5种网站页面布局方式及特点分析
港夕科技的博客
12-17 3万+
互联网的世界里，网页是我们接触最多的内容展示平台（载体），各种风格设计及不同类型主题的网站数不胜数，笔者作为一名网页设计师，在关注内容本身的同时，也喜欢研究一下网站页面的设计特点，这不失为一种提升网页设计能力的好方法。今天我们主要聊聊关于网站页面布局的一些话题，网页设计虽然千变万化，如果你是个细心的设计师一定会发现其中的一些端倪，就页面布局而言，常用的布局方式其实也就那么几个，接下来港夕科技就和大...
为什么部分看起来不太复杂的网站，比如Facebook，需要大量顶尖高手来开发
生而为人我很抱歉
03-23 700
https://www.zhihu.com/question/20303645 回答A： 先说你看到的页面上，最重要的几个： 【搜索商品】 ——这个功能，如果你有几千条商品，完全可以用select * from tableXX where title like %XX%这样的操作来搞定。但是——当你有10000000000（一百亿）条商品的时候，任何一个数据库都无法存放了，请问你怎...
06＜ 复杂网页 ＞的一些技巧
WLB 的博客
09-16 139
文章目录尚硅谷课程框设置水平居中 尚硅谷课程 链接在这: Web前端零基础入门HTML5+CSS3基础教程 框 设置水平居中 使一个元素在其父元素中,水平居中 首先,设定父元素为一个框 其次,设置子元素width=xxx; margin:0 auto; 示例: div.outer{ width : 100%; height: 50px; margin-top:0; margin-right:0; border: 1px solid yellow
一个极度复杂的jsp页面
Keeplingshi的专栏
03-13 3982
这个页面是一个动态表单页面，里面几乎设计到自己在jsp页面上所用的大部分技术，包含很多jQuery的细节。故此贴出来，以供自己以后查看。 所涉及到的东西有：form表单序列化提交，uploadify插件，动态生成文本框，button等元素，动态生成表单等。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
对于复杂页面的一些页面布局思路
weixin_34376986的博客
04-28 377
1、最好的布局方式是文档流排列。 如果能把顶部 的复杂效果图形，拿出来，弄成一个png图片。（不包括文字），是最简单的文档流排列了。 但是设计给的这一部分，非常难以抠出来。 　　2、分上下两部分，中间衔接：用2层div套，外层放底色紫色，里面一层用背景图，定位在顶部 左侧。 下面文档流排。 3、这个详情页的图，坑死了我。 因为主页的是上下分割的布局，这一次，在不改变前...
五种经典网页布局设计
热门推荐
lzy15907117519的博客
03-04 8万+
不得不说，网页设计绝对是有套路的！网页布局虽然千变万化，但是如果你仔细观察，会发现有一些布局适用范畴相当广，经久不衰。今天的文章，我们就来聊一下5种经典的网页布局。在开始一个新的网页设计项目的时候，不知道你会不会有那么一瞬间的犹豫：“这个项目要从哪里着手呢？”伴随着这种犹豫的，是“做点前所未有的作品”的冲动。不过，很多时候，这些冲动和犹豫都在需求的磨合、设计的细化中，逐步淡化。相比大家也都发现了，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值