其实html没什么好补充的了，主要是使用css如何构造出各种想要的效果

1.加减框

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .inp{

             border: 0;

             border-left: 1px solid #dddddd;

             border-right: 1px solid #dddddd;

             height: 25px;

             margin: 0;

             padding: 0;

             float: left;

         }

         .sp{

             display: inline-block;

             height: 25px;

             width: 25px;

             line-height: 25px;

             text-align: center;

             float: left;

         }

     </style>

 </head>

 <body>

     <div style="border: 1px solid #dddddd;display: inline-block">

         <div class="sp">-</div>

         <input type="text" class="inp" />

         <div class="sp">+</div>

     </div>

 </body>

 </html>

2.小尖角

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .c1{

             display: inline-block;

             border-right: solid 15px red;

             border-left: solid 15px transparent;

             border-top: solid 15px yellow;

             border-bottom: solid 15px black;

         }

     </style>

 </head>

 <body>

     <div class="c1"></div>

 </body>

 </html>

3.伪类与常用后端模版样式

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         /*伪类清除漂浮*/

         .clearfix:after{

             content: '.';

             clear: both;

             display: block;

             visibility: hidden;

             height: 0;

         }

         body{

             margin: 0;

         }

         .pg-header{

             height: 50px;

             background-color: aqua;

         }

         .pg-body .body-menu{

             position: absolute;

             top: 50px;

             width: 200px;

             left: 0;

             bottom: 0;

             background-color: red;

         }

         .pg-body .body-content{

             position: absolute;

             top: 50px;

             left: 210px;;

             right: 0;

             bottom: 0;

             background-color: yellow;

             overflow: auto;

         }

     </style>

 </head>

 <body>

     <div class="pg-header"></div>

     <div class="pg-body">

         <div class="body-menu">

         </div>

         <div class="body-content">

             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>

             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>

             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>

             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>

             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>

             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>

             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>

             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>

             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>

             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>

             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>

         </div>

     </div>

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

 </body>

 </html>

html+css-----补的更多相关文章

  1. PostCSS一种更优雅、更简单的书写CSS方式

    Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include displ ...

  2. 前端与php的sublime text3常用插件

    sublime text各种版本下载:http://sublimetext.iaixue.com/dl/ 1.安装Package Control 快捷键: ctrl+`     粘贴内容后Enter: ...

  3. postcss使用

    准备 构建工具为Gulp基于PostCSSPostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器PostCSS插件 Autoprefixer 为CSS补全浏览器前缀PostCSS插件 ...

  4. 使用Quasar设计Material和IOS风格的响应式网站

    使用Quasar设计Material和IOS风格的响应式网站 栏目: CSS · 发布时间: 8个月前 来源: segmentfault.com   本文转载自:https://segmentfaul ...

  5. gulp+webpack多页应用开发，webpack仅处理打包js

    项目背景:一个综合网站,开发模式为后端嵌套数据,前端开发静态页面和部分组件. 问题:gulp任务处理自动刷新.sass编译等都是极好的.但是对于js的处理并不是很好,尤其是项目需要开发组件时候,如评论 ...

  6. gulp开发工具之postcss

    参考文章:http://www.cnblogs.com/givebest/p/4771154.html package.json { "name": "postcss&q ...

  7. 从零开始搭建react基础开发环境（基于webpack5）

    前言 最近利用闲暇时间把webpack系统的学习了下,搭建出一个react环境的脚手架,写篇文章总结一下,帮助正在学习webpack小伙伴们,如有写的不对的地方或还有可以优化的地方,望大佬们指出,及时 ...

  8. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  9. Webstorm配置CSS/SCSS自动补全兼容前缀autoprefixer插件

    关于Autoprefixer Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及 ...

  10. jquery+css实现邮箱自动补全

    今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. ...

随机推荐

  1. repeater没有数据显示暂无数据,无记录

    方法就是在FooterTemplate加个Label并根据repeater.Items.Count判断是否有记录.关键代码如下: <FooterTemplate> <asp:Labe ...

  2. python编码-2

    字典 >>> aa={} >>> aa['wo']=[1,2,3,4] >>> aa['ni']=[5,6,7,8] >>> a ...

  3. 【线性代数】 06 - Jordan标准型

    现在就来研究将空间分割为不变子空间的方法,最困难的是我们还不知道从哪里着手.你可能想到从循环子空间出发,一块一块地进行分割,但这个方案的存在性和唯一性都不能解决.不变子空间分割不仅要求每个子空间\(V ...

  4. knockout 学习实例7 foreach

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Newtonsoft.Json 的解析用法。

    JsonView是查看和分析json的利器,目录下的Newtonsoft.Json.dll ,我们可以当第三方引用之. >>> //想服务器端发送请求,获取订单信息 myReques ...

  6. win7 ：安装SQL2005

     转载:http://www.cnblogs.com/icewee/articles/2019783.html 操作系统:Microsoft Windows 7 旗舰版(64位) 数据库版本:SQL ...

  7. LeetCode "Design Tic-Tac-Toe"

    We don't have to keep a complete chess board.. just counters! class TicTacToe { vector<int> cn ...

  8. 【uTenux实验】互斥体

    互斥体,维基百科中交互斥锁.其定义是这样的:互斥锁(英语:英语:Mutual exclusion,缩写 Mutex)是一种用于多线程编程中,防止两条线程同时对同一公共资源(比如全局变量)进行读写的机制 ...

  9. 【uTenux实验】时间管理（系统时间/周期性处理/警报处理）

    1.系统时间管理 系统时间管理函数用来对系统时间进行操作,是OS的一个基础性的东西.个人认为,设置系统时间和获取系统时间对OS来说基本是可有可无的. uTenux提供了三个系统时间相关API.分别用于 ...

  10. Storm Ack框架笔记

    Storm利用Acker Bolt节点跟踪消息,当Spout发送出去的消息以及这些消息所衍生出来的消息均被处理后,Spout将受到对应于该消息的Ack.实现要点: 1.Storm中每条发送出去的消息都 ...