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前端基础补充的更多相关文章

  1. web前端基础——补充

    1  布局和事件 布局效果如下(标题和内容都居中,两边留空白) 布局代码如下 <!DOCTYPE html> <html lang="en"> <he ...

  2. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  3. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  4. 进击的Python【第十五章】：Web前端基础之DOM

    进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...

  5. 进击的Python【第十四章】：Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  6. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  7. web前端基础知识总结

    上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 ...

  8. web前端基础学习路线

    1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...

  9. web前端基础知识学习网站推介

    内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...

随机推荐

  1. rpm源码安装mysql

    1)访问官网(mysql社区服务器) http://downloads.mysql.com/archives/community/ 2)选择自己需要的版本和对应服务器(例如 服务器是centos 6. ...

  2. Effective C++ —— 杂项讨论（九）

    条款53 : 不要轻忽编译器的警告 请记住: 1. 严肃对待编译器发出的警告信息.努力在你的编译器的最高(最严苛)警告级别下争取“无任何警告”的荣誉. 2. 不要过度倚赖编译器的报警能力,因为不同的编 ...

  3. iOS打电话、发短信、发邮件功能开发

    本文转载至 http://www.lvtao.net/ios/506.html 今天把APP里常用小功能 例如发短信.发邮件.打电话.全部拿出来简单说说它们的实现思路. 1.发短信实现打电话的功能,主 ...

  4. 【Redis】php+redis实现消息队列

    在项目中使用消息队列一般是有如下几个原因: 把瞬间服务器的请求处理换成异步处理,缓解服务器的压力 实现数据顺序排列获取 redis实现消息队列步骤如下: 1).redis函数rpush,lpop 2) ...

  5. Delphi Code Editor 之 几个特性(转）

    Delphi Code Editor有几个特性在编写大规模代码时非常有用.下面分别进行介绍: 原地址:http://www.cnblogs.com/pchmonster/category/343330 ...

  6. linux中增加swap分区文件的步骤方法

     一.swap交换分区 Swap分区在系统的物理内存不够用的时候,把硬盘空间中的一部分空间释放出来,以供当前运行的程序使用.那些被释放的空间可能来自一些很长时间没有什么操作的程序,这些被释放的空间被临 ...

  7. 扫描类APP推荐

    扫描全能王 (com.intsig.camscanner) - 5.10.0.20190426 - 应用 - 酷安网 应该是手机上最好的扫描类 APP 了,没有之一.只是因为付费太贵. 感谢酷安评论区 ...

  8. Android官方架构组件介绍之ViewModel

    ViewModel 像Activity,Fragment这类应用组件都有自己的生命周期并且是被Android的Framework所管理的.Framework可能会根据用户的一些操作和设备的状态对Act ...

  9. tensorflow和python操作中的笔记

    前一段时间做了一些项目,把一些笔记放在了txt中,现分享出来,自己也能够时长预习. 1) 读取文件时,将固定的文件地址,采用数组或者字符串的形式,提前表示出来,后期使用时候采用拼接操作 2) # 得到 ...

  10. EF批量添加，删除，修改的扩展

    在EF各版本中,没有相应批量的添加,删除,修改,在用ORM 处理数据时直有个尴尬.在网上,也接到了很多网友的询问这方面的情况,特此今天把这方面的相关扩展分享一下,(这里只做批量删除的例子,添加和修改的 ...