web前端基础补充
1 布局和事件
布局效果如下(标题和内容都居中，两边留空白)
布局代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中布局</title>
<style>
.header{
height: 48px;
background-color:lightgrey;
} .body{
background-color: blue;
}
/*设置宽度并居中*/
.container{
width: 980px;
margin: 0 auto;
background-color: chartreuse;
}
</style>
</head> <body>
<!--网页头部部分-->
<div class="header">
<!--这里通过在内层嵌套div标签，并设置class='container'，这样它就相对自己的父标签进行居中-->
<div class="container">网页头部</div>
</div> <!--网页主体部分-->
<div class="body">
<div class="container">网页主体</div>
</div>
</body>
</html>
居中布局代码
Bootstrap中的事件：关闭Bootstrap模态对话框(使用Bootstrap提供的方法)
$('#myModal').modal('hide') //其中#myModal是ID选择器
2 a标签属性
对于a标签，当鼠标移动上去之后要显示小手，这个通过属性cursor:pointer来实现；另外对于a标签，当鼠标放上去时怎样取消下划线，这个通过属性text-decoration:none来实现。
3 z-index
通过设置z-index属性，来设计整个页面的层级。
4 圆角
首先我们定义的div标签，默认他是方形的，我们可以通过"border-radius"属性来改变它的形状，看下面的代码：
<!--这里border-radius:百分数，相当于给div设置边框的圆润程度-->
<div style="width: 50px;height: 50px;background-color:blue;border-radius:50%"></div>
web前端基础补充的更多相关文章
- web前端基础——补充
1 布局和事件 布局效果如下(标题和内容都居中,两边留空白) 布局代码如下 <!DOCTYPE html> <html lang="en"> <he ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- 进击的Python【第十六章】：Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
- 进击的Python【第十五章】：Web前端基础之DOM
进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...
- 进击的Python【第十四章】：Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...
- 进击的Python【第十三章】：Web前端基础之HTML与CSS样式
进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...
- web前端基础知识总结
上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 ...
- web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
- web前端基础知识学习网站推介
内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...
随机推荐
- 管理开机启动：systemd
一.CentOS7 systemd 介绍 在 CentOS7 中,使用 systemd 来管理其他服务是否开机启动,systemctl 是 systemd 服务的命令行工具 [root@localho ...
- nested exception is org.springframework.beans.factory.BeanCreationException: 不能注入对象 创建对象失败 spring
[出现错误的背景] 在使用Spring+SpringMVC+Mybatis SSM集成框架时,服务器启动就会报错. [错误根源] XML配置错误. [解决方案] 第一步.查找springmvc.xml ...
- 【PHP】 php实现字符串反转：支持中英文
strrev 函数对英文很好用,直接可以实现字符串翻转 但是面对中文呢?肯定都是乱码,对于这样的问题有很多,比如strstr,substr等函数都是这样的. PHP提供了mb_类的函数实现不同编码. ...
- Tomcat远程任意代码执行漏洞及其POC（CVE-2017-12617）
一.原理分析: 只需参数readonly设置为false或者使用参数readonly设置启用WebDAV servlet false,则Tomcat可以不经任何身份验证的控制直接接收PUT方式上传的文 ...
- stm32的VCC/VDD/VSS/VEE/VBAT的区别
先看一下stm32vet6的引脚图吧 电路设计以及PCB制作中,经常碰见电源符号:VCC. VDD.VEE.VSS,他们具有什么样的关系那? 一.解释 VCC:C=circuit 表示电路的意思, 即 ...
- Linux系统下 Apache+PHP 环境安装搭建
一.安装Apache2.2.221.到官网下载 http://httpd.apache.org/download.cgi ,选择相应的版本 可以先下载到windows系统中,上传到linux, 也可 ...
- Jmeter性能测试实践之java请求
前言 Apache Jmeter是开源.易用的性能测试工具,之前工作中用过几次对http请求进行性能测试,对jmeter的基本操作有一些了解.最近接到开发的对java请求进行性能测试的需求,所以需要 ...
- 170705、springboot编程之自定义properties
spring boot使用application.properties默认了很多配置.但需要自己添加一些配置的时候,可以这样用,如下! 在application.properties文件中增加信息 1 ...
- jenkins之jenkins与gitlab集成
实现当git代码使用push的时候自动构建 安装gitlab钩子插件 安装令牌认证插件 在主机上面生产token(其实随便弄一个简单的字符串也可以) openssl rand -hex 10 修改任务 ...
- Code Forces 652D Nested Segments（离散化+树状数组）
Nested Segments time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...