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实现的邮箱自动补全,供大家参考和学习. ...

随机推荐

Java 报表之JFreeChart(第一讲)
1.利用 JFreeChart 创建垂直柱状报表 package com.wcy.chart.bar; import javax.servlet.http.HttpSession; import or ...
validate
<?php $rules = [ "ip" => function ($var) {return ip2long($var);}, "email" ...
Python之路，day2-Python基础1
python2 range(20) for i in range(10): print(i) range(1,10) ----->从1开始到9 else: #如果for循环正常结束, 就执行 ...
Windows Service 开发,安装与调试
Visual Studio.net 2010 Windows Service 开发,安装与调试本示例完成一个每隔一分钟向C:\log.txt文件写入一条记录为例,讲述一个Windows Servic ...
git秘钥配置--转
git是分布式的代码管理工具,远程的代码管理是基于ssh的,所以要使用远程的git则需要ssh的配置.github的ssh配置如下:一 .设置git的user name和email:$ git con ...
Apache Shiro 使用手册（一）Shiro架构介绍
一.什么是Shiro Apache Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能: 认证 - 用户身份识别,常被称为用户"登录": 授权 - ...
[MySQL] 忘记root账户密码怎么办
一.缘由由于各种原因,我们会忘记mysql的root密码. 二.解决办法方法一:skip-grant-tables方式启动 1.停止mysql服务 service mysqld stop 2.以 ...
JavaScript 输入内容就触发事件
<textarea name="textarea" placeholder="请输入产品识别号" onkeyup="alert();" ...
114、Android禁止ViewPager的左右滑动
有时候在开发中会遇到一些“诡异”的要求,比如在ViewPager中嵌入ListView,或者再嵌入一个ViewPager,那么在滑动的时候就会造成被嵌入的XXView不能滑动了,那么现在就把最外层的V ...
预处理语句--#define、#error和#warning
1.#define语句我们经常会这样定义一些宏: #define BLOCK 8192 但这样的宏却不能在字符串中展开,如: printf("The BLOCK numb ...

html+css-----补

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

随机推荐

热门专题