zoukankan      html  css  js  c++  java
  • CSS--补充

    • 一,DIV+CSS配合使用
    现在的前台效果越来越炫,特别是一些电商或者门户,其中很多的东西都不会用原始的html来控制页面布局了,都采用了div+css。
    首先举一个例子来介绍下如何使用div+css来做控制页面布局,简单了解下就好了,这些毕竟不是我们做的事情。

    <html>
    <head>
    <title>css的综合使用: DIV+CSS</title>
    <style type="text/css">
    	
    	#head {
    		height: 15%;
    		background-color: blue;
    		padding: 5px;
    	}
    	
    	#body {
    		height: 75%;
    		background-color: gray;
    	}
    	
    	#left {
    		 15%;
    		height: 100%;
    		background-color: red;
    		float: left;
    	}
    	
    	#main {
    		 85%;
    		height: 100%;
    		background-color: green;
    		float: right;
    	}
    	
    	#foot {
    		height: 10%;
    		background-color: orange;
    		padding: 5px;
    	} 
    </style>
    </head>
    <body style="text-align: center;">
    	<div id="head">上面</div>
    	<div id="body">
    		<div id="left">左边</div>
    		<div id="main">右边</div>
    	</div>
    	<div id="foot">下面</div>
    </body>
    </html>
    




    • 二,如何在脚本中修改css样式,就2个步骤
    1,获取到需要设置css样式的目标元素
    2,修改目标元素的css样式,常用的方式有两种:
    修改内联css属性值,比如:obj.style.属性名=属性值
    修改html元素的class属性,比如:obj.className=class选择器


    值得注意的是:脚本中的css属性名与页面中的静态css属性名并不完全相同。
    脚本中的css属性名是去掉原静态css属性中的(-),并将第一个单词的首字母小写,后面每个单词的首字母大写。比如静态css属性名为background-color,对应脚本中的属性名为backgroundColor。如果原来的静态css属性中不包含(-),则脚本中的css属性名和原来静态css属性名相同。

  • 相关阅读:
    Office加载项安装
    Office加载项
    centos部署vue项目
    centos系统下安装Nginx
    MongoDB 安装笔记
    CDN基本工作过程
    前端常见跨域解决方案(全)
    JS 扁平化(flatten) 数组
    console.log 打印的值不准确
    arr.flat(Infinity)数组扁平化
  • 原文地址:https://www.cnblogs.com/LinkinPark/p/5233047.html
Copyright © 2011-2022 走看看