其实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. LeetCode 【47. Permutations II】

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  2. 2016HUAS_ACM暑假集训2L - Points on Cycle（圆上的点）

    一个简单的几何题,自己在纸上列出方程解出结果的表达式,再用程序表达出来就行了. 不过老司机(老司机的woodcoding)说用旋转向量法比较简单,有时间要去看一看. 大致题意:一个圆心在原点的圆,半径 ...

  3. Node.js网络编程

    Node.js为javascript语言提供了一个在服务端运行的平台,它以其事件驱动,非阻塞I/O机制使得它本身非常适合开发运行在在分布式设备上的I/O密集型应用,分布式应用要求Node.js必须对网 ...

  4. ios实现屏幕旋转的方法

    1.屏蔽AppDelegate下面的屏幕旋转方法 #pragma mark - 屏幕旋转的 //- (UIInterfaceOrientationMask)application:(UIApplica ...

  5. Difference between applicationContext.xml and spring-servlet.xml in Spring Framework

    Question: Are applicationContext.xml and spring-servlet.xml related anyhow in Spring Framework? Will ...

  6. java 网络编程复习（转）

    好久没有看过Java网络编程了,现在刚好公司有机会接触,顺便的拾起以前的东西 参照原博客:http://www.cnblogs.com/linzheng/archive/2011/01/23/1942 ...

  7. HTC Vive开发笔记之UI Guideline

    本文转自HTC官方论坛,原址https://www.htcvive.com/cn/forum/chat.php?mod=viewthread&tid=1641&extra=page=1 ...

  8. Hololens开发笔记之Gesture手势识别（单击，双击）

    本文使用手势识别实现识别单击及双击手势的功能,当单击Cube时改变颜色为蓝色,当双击Cube时改变颜色为绿色. 手势识别是HoloLens交互的重要输入方法之一.HoloLens提供了底层API和高层 ...

  9. for语句

    一.for语句的格式格式1:for (控制变量初始化表达式;条件表达式;增量表达式)  语句1; 格式2:for (控制变量初始化表达式;条件表达式;增量表达式){ 语句1;  语句2;  -} 注意 ...

  10. 最牛B的编码套路

    最近,我大量阅读了Steve Yegge的文章.其中有一篇叫“Practicing Programming”(练习编程),写成于2005年,读后令我惊讶不已:   与你所相信的恰恰相反,单纯地每天埋头 ...