前端基础7：a标签常用方法和元素居中方式，响应式@media

a标签

a标签作用

锚点
- 语法：href=“#+指定位置”
- a标签href属性的属性值为相应要跳转到的元素id属性名前加#
- <a href="#top">回到（顶部/指定位置）
实现打电话功能
- 语法： <a href="tel:123123">
实现发邮件功能
- 语法： <a href="mailto：134124124@qq。com">
注意事项：取消a的点击事件采用以下方法
- <a href="javascript：void（0）">

使元素居中的方式

1.line-light：可以使文本上下居中
2.margin：0 auto； 使元素左右居中
3.padding改变元素内边距可以使内容居中显示
4.通过定位position改变子元素位置，实现居中
5.通过transform:translate（-50%，-50%）；改变相对自己x轴，y轴的长度，实现居中。

响应式

一个网站能够兼容多个终端，并且在各个终端可以有很好的展示体验

当屏幕宽度很大的时候一行显示6个

当屏幕宽度中等的时候一行显示3个

当屏幕宽度较小的时候一行显示2个

当屏幕宽度很小的时候一行显示1个

@media 媒体类型(媒询)

指我们在何种媒体上打开我们的页面 @media是可以查看我们当前的一个媒体的类型

语法：

@media mediatype and|not|only (media feature) {CSS-Code;
}@media only screen{仅仅在彩屏设备下识别
}
/*and 用来连接媒体类型 和 媒体特性*/
@media all and （min-width:500）{//当屏幕宽度大于等于500的时候识别
}
复制代码

媒体类型 |值|描述| |--|--| |all|用于所有设备| |print|用于打印机| |screen|用于电脑屏幕，平板电脑，智能手机等。| |speech|用于屏幕阅读器等发生设备|

媒体特性

width 文档宽度
- min-width:500px 当屏幕宽度大于等于500像素的时候
- max-width: 500px 当屏幕宽度小于等于500像素的时候

样式引入方式

样式表中末尾添加
- @media and (min-width:600px){}
link标签
- <link rel = "stylesheet" href="css/css.css" media="all and (min-width:600px)" />
外链式
- @import url(css.css)(max-width:600px)

转载于:https://juejin.im/post/5b853a5651882542c20f2c32

前端基础7：a标签常用方法和元素居中方式，响应式@media相关推荐

前端基础HTML-基础标签
前端基础HTML-基础标签 01-标题标签 <h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3>< ...
【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
bilibili在线视频演示地址: [前端代码实例]使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能效果图: 完整代码: <!DOCTYPE ...
前端ui框架_跨屏建站发布同名响应式前端ui框架
跨屏建站发布同名响应式前端ui框架,它是跨屏建站关于前端页面构建上的积累的结晶,现已开源,我们将持续的用开源的方式做好ui框架产品,用心做好建站产品. 关于跨屏UI框架是基于Bootstrap的扩展 ...
前端开发工程师 - 04.页面架构 - CSS Reset 布局解决方案响应式页面优化规范与模块化...
04.页面架构第1章--CSS Reset 第2章--布局解决方案居中布局课堂交流区水平列表的底部对齐如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
easyui前端框架模板_.NET Core基于Ace Admin的响应式框架
(给DotNet加星标,提升.Net技能) 转自:netnrcnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架基于Ace Admin框架菜单导航 ...
Bulma - 免费开源的纯 CSS 前端 UI 框架，专注于构建移动优先的响应式 web 界面
简单易用的 CSS 框架,虽然只有一个 CSS 文件,但功能很强大,在国外很受开发者欢迎,推荐给大家. 关于 Bulma CSS 框架 Bulma 是一个简单.很容易自定义的 CSS UI 框架,提供 ...
前端基础——双单标签、行内块级元素、路径、常用标签
一.单标签和双标签: 在HTML基础中,单标签就是由一个标签组成的. 例如<br>.<hr>.<img>.<input>.<param>.& ...
前端基础-html-换行标签
 <p>前端技术 <br> 一般分 ...
前端基础01 html标签总结
一.html是什么 A.HTML是超文本标记语言 B.文本:txt文本只能用于存放文字或者是字符 C.超文本:不仅可以用于来描述文字还可以用于来描述图像音频视频超链接 D.标记:类似java ...

前端基础7：a标签常用方法和元素居中方式，响应式@media

a标签

a标签作用

使元素居中的方式

响应式

@media 媒体类型(媒询)

媒体特性

样式引入方式

前端基础7：a标签常用方法和元素居中方式，响应式@media相关推荐

最新文章

热门文章