其实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. python集成开发工具

    1. IDLE http://python.org/idle/ (在 Python 发行版中自带) 2 BlackAdder 3 PythonWorks 4 Wing IDE http://wingw ...

  2. ecshop教程：重置后台密码MD5+salt

    ecshop密码加密方式: MD5 32位+salt,简单来说就是明文密码用MD5加密一次,然后在得到的MD5字符后边加上salt字段值(salt值为系统随机生成,生成以后不再改变)再进行一次MD5加 ...

  3. 5天玩转C#并行和多线程编程

    5天玩转C#并行和多线程编程系列文章目录 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 5天玩转C#并行和多线程编程 —— 第二天 并行集合和PLinq 5天玩转C#并行和多线程编 ...

  4. 关于初次使用Verilog HDL语言需要懂的基本语法

    关于初次使用Verilog HDL语言需要懂的基本语法 1.常量 数字表达式全面的描述方式为:<位宽><进制><数字> 8’b10101100,表示位宽为8的二进制 ...

  5. .NET EXCEL NPOI 图片

    今天闲来无事写了下 “ .NET  用  NPOI 组件 将 图片文件 写到 EXCEL 中  ” 先看效果: 头是我加的,这个应该不是难事! 再看代码: private void button1_C ...

  6. TextView与Html相结合的具体方法？

    TextView与Html相结合的具体方法? android教程之textview解析带图片的html示例 Android中的TextView,本身就支持部分的Html格式标签.这其中包括常用的字体大 ...

  7. Jmeter-获取响应结果中参数出现的次数

    在测试中,有时候会遇到要统计响应结果中某个参数出现了多少次,如果量级很大,一个一个数不太现实,下面讲一下实现自动打印出该参数出现的次数的方法. 例如我的响应信息为:{"ip":&q ...

  8. oracle查看所有表的数据量并排序

    源地址:http://blog.csdn.net/zhanggnol/article/details/6683697 select t.table_name,t.num_rows from user_ ...

  9. springmvc常用注解与类型转换

    springmvc常用注解与类型转换 一:前置 spring -servlet.xml 注入 <!-- 启用spring mvc 注解 --> <context:annotation ...

  10. js实现图片的淡入淡出

    思想: 其实是运动的一种,就是当鼠标移入div中时,将div的透明度变大, 当鼠标移动出来的时候透明度变回原来. 你可以尝试写一下,不会再看看代码 <style> #div1{ width ...