html+css-----补

其实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-----补的更多相关文章

PostCSS一种更优雅、更简单的书写CSS方式
Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include displ ...
前端与php的sublime text3常用插件
sublime text各种版本下载:http://sublimetext.iaixue.com/dl/ 1.安装Package Control 快捷键: ctrl+` 粘贴内容后Enter: ...
postcss使用
准备构建工具为Gulp基于PostCSSPostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器PostCSS插件 Autoprefixer 为CSS补全浏览器前缀PostCSS插件 ...
使用Quasar设计Material和IOS风格的响应式网站
使用Quasar设计Material和IOS风格的响应式网站栏目: CSS · 发布时间: 8个月前来源: segmentfault.com 本文转载自:https://segmentfaul ...
gulp+webpack多页应用开发，webpack仅处理打包js
项目背景:一个综合网站,开发模式为后端嵌套数据,前端开发静态页面和部分组件. 问题:gulp任务处理自动刷新.sass编译等都是极好的.但是对于js的处理并不是很好,尤其是项目需要开发组件时候,如评论 ...
gulp开发工具之postcss
参考文章:http://www.cnblogs.com/givebest/p/4771154.html package.json { "name": "postcss&q ...
从零开始搭建react基础开发环境（基于webpack5）
前言最近利用闲暇时间把webpack系统的学习了下,搭建出一个react环境的脚手架,写篇文章总结一下,帮助正在学习webpack小伙伴们,如有写的不对的地方或还有可以优化的地方,望大佬们指出,及时 ...
Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
Webstorm配置CSS/SCSS自动补全兼容前缀autoprefixer插件
关于Autoprefixer Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及 ...
jquery+css实现邮箱自动补全
今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. ...

随机推荐

Spring源码学习之：@async 方法上添加该注解实现异步调用的原理
在我们使用spring框架的过程中,在很多时候我们会使用@async注解来异步执行某一些方法,提高系统的执行效率.今天我们来探讨下 spring 是如何完成这个功能的. spring 在扫描be ...
【转载】开发备必：WEB前端开发规范文档
规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者 ...
iphone field test 源码
Iphone工程模式读取周围BTS信息的路测程序:包括后台和界面.-iphone field test, used for reading the BTS infomation nearby. 下载地 ...
each循环
var NA_COUNT=0; var NG_OK_COUNT=0; //获取所有检验明细为同一个编号的下拉选项,看有没有不是N/A的下拉选项 $("#@(Perfix)tbData sel ...
android学习笔记52——手势Gesture，增加手势、识别手势
手势Gesture,增加手势 android除了提供了手势检测之外,还允许应用程序把用户手势(多个持续的触摸事件在屏幕上形成特定的形状)添加到指定文件中,以备以后使用如果程序需要,当用户下次再次画出 ...
UML精粹3 - 类图，序列图，CRC
类图Class diagram 类图描述系统中的对象类型,以及它们之间的各种静态关系.类图也展示类的性质和操作,以及应用于对象连接方式的约束.UML中的特性feature,涵盖了性质property和 ...
eclipse 3.7 配置svn
1.首先需要安装SVN客户端TortoisSVN.地址:http://tortoisesvn.net/ 2.eclipse低版本的需要安装Subversive Revision Graph,地址:ht ...
java io 输入输出流
数据流分类: 流序列中的数据既可以是未经加工的原始二进制数据, 也可以是经一定编码处理后符合某种格式规定的特定数据. 因此Java中的流分为两种: 1) 字节流:数据流中最小的数据单元是字节 2) 字 ...
web.config
参数上传和文件上传大小限制调整,参数上传最大2097151 <system.web> <httpRuntime requestValidationMode="2.0&quo ...
DataTable与DataSet
转自:http://www.cnblogs.com/rjf1979/archive/2010/09/09/1822667.html DataSet包含很多个DataTable 一张表的时候用DataT ...

html+css-----补

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

随机推荐

热门专题