html页面边框的另一种写法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>边框</title>
        <style type="text/css">
            div{
                width: 300px;
                height: 300px;
                /*border: 1px solid red; 复合样式*/
                
                /*单一样式*/
                border-width: 1px 2px 3px 4px;
                border-style: solid dashed dotted solid;
                border-color: red blue black pink;
                /*四个值依次分别对上、右、下、左赋值*/
                /*当只有两个值时一次分别对上/下、左/右赋值*/
                /*当放三个值时依次分别对上、左/右、下赋值*/
                border-top: 10px solid yellow;
                /*单独对上边框进行赋值，
                 border-bottom为下边框
                 border-left为左边框
                 border-right为右边框
                 * */
                border-bottom-color: hotpink;
                /*单独对下边框颜色进行复制*/
            }
        </style>
    </head>
    <body>
        <div>
            
            
        </div>
        
        
    </body>
</html>
注意：边框其实不是一个矩形，当你把上边变得颜色设置的不同时你会发现变得是一个梯形，而如果你把div的宽和高设置为0的话，这个有变得不是梯形，他的上低也会变为0，成为一个三角形，这个在面试前端工作时，面试官有可能会问到

时间： 2024-12-14 06:22:48

html页面边框的另一种写法的相关文章

JavaScript Html页面加载完成三种写法

//一.Html页面加载完成的JS写法 //1. $(function () {     alert("窗体Html页面加载完成方法一"); }); //2. $(document).ready(function () { alert("Html页面加载完成方法二"); }); //3. window.onload = function () {     alert("Html页面加载完成方法三");     }; 原文地址:https://ww

ChroPath插件，xpath 通过递进方式定位有层级关系的页面元素的2种写法。

试验页面http://ui.imdsx.cn/uitester/ 目标:定位到页面元素 “单击” . 第一种写法://div[@class='driver'][3]/div[@class='inner'][3] (定位到单击按钮的 div标签) 第二种写法://div[@class='driver'][3]//*[@id='onC'] (定位到 单击 按钮) xpath提供的定位命令灵活使用. 原文地址:https://www.cnblogs.com/xuexizongjie/p/1114875

jquery 在页面中三种写法

jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6.7.8浏览器,这样做的目的是为了兼容移动端开发.由于减少了一些代码,使得该版本比 jQuery 1.x 更小.更快.如果开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了.jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面 <head> 标签内中,通过 script 标签引入 jQuery 库即可. 1 <script type=&q

ASP.NET 页面之间传值的几种方式

原文:http://www.cnblogs.com/wangjiming/archive/2017/01/18/6275854.html#!comments 详解每种方法 一.Request.QueryString 核心代码: protected void getQueryString_Click(object sender, EventArgs e) { string QueStr = Request.QueryString["name"]; Response.Write(QueSt

angularJs中$q的两种写法

带缓存处理的两种写法 过程:点击button触发load()方法,请求数据成后显示到页面中.如果已经请求过则从缓存中读取. 在线浏览 写法1: function demo(){ if (demo.cache == undefined) { return $http.get('https://api.github.com/users/github') .success(function(data, status, headers){ demo.cache = data; return $q(fun

可拖动弹窗的JS和jQuery两种写法

最近在慕课网上学习了一个网页可拖动对话框js实现的演示视频,这个demo中的例子是百度首页登录按钮的弹窗,如下图: 当点击左上角的登录按钮时,弹窗出现并自动居中,同时窗口可拖动的范围被限制在了可视区域内,即浏览器视窗的上下左右边界,弹窗无法移出移动出四个边界,也不会出现滚动条. 另一个效果就是,当改变窗口大小时,对话框自动居中. 这个视频中用了原生js,jQuery两种写法实现案例,但本质上,对话框居中,限制拖动范围的的计算思路是一致的. 为了简化页面,总结核心思路,我重新写了一个小demo,界

笔记（三） ASP.NET 页面之间传值的几种方式

ASP.NET 页面之间传递值得方式大致可以分为如下几种:Request.QueryString["name"],Request.Form("name"),Session,Cookie,Cache,Application,Server.Transfer,Database, HttpContext的Item属性,Files,DataBase等等. 一.Request.QueryString 核心代码: protected void getQueryString_Cli

python 爬虫scrapy的两种写法

""" scrapy初始Url的两种写法, 一种是常量start_urls,并且需要定义一个方法parse() 另一种是直接定义一个方法:star_requests() """ import scrapy class simpleUrl(scrapy.Spider): name = "simpleUrl" start_urls = [ #另外一种写法,无需定义start_requests方法 'http://lab.scrap

【转】【ASP.NET MVC系列】浅谈ASP.NET 页面之间传值的几种方式

ASP.NET MVC系列文章 原文地址:https://www.cnblogs.com/wangjiming/p/6275854.html [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP.NET框架 [05]浅谈ASP.NET MVC运行过程 [06]浅谈ASP.NET MVC 控制器 [07]浅谈ASP.NET MVC 路由 [08]浅谈AS