【静态页面架构】CSS之链接和图像
CSS架构
一。链接:
- 链接元素:通过使用a元素的href属性设置跳转到指定页面地址
<style>
a{
color: blue;
text-decoration: none;
}
a:hover{
cursor:default;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#">这是个链接</a>
</body>- 绝对路径与相对路径:
- 绝对路径:以域名开头，到域名后面可指定具体页面或资源的路径
- 相对路径:在当前页面与资源处在一个目录就是相对路径
- 当前页面与资源在子级目录，就是../目标文件
- 当前页面与资源在父级目录，就是目录文件名/目标文件名
- 当前页面与资源与父级目录处在同一个目录，就是..目录文件名/目标文件名
<body>
<a href="4抖音风格文本.html">这是抖音链接</a>
<br><!--<a>
target表示当前链接打开方式
_self：为默认值，表示打开当前窗口打开页面
_blank:表示在新的窗口（页签）打开页面-->
<a href="mailTo:qh52562500@163.com">我的email</a>
<!--用法：配合hrf属性值是以"mailTo:"开头的
问题 - 必须配合当前电脑中的默认的邮箱软件使用-->
</body>- 锚点:通过a元素的href属性与其他元素的ID属性配合，实现锚点效果
<body>
<a id="top">这是顶部</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--目标不一定是<a>元素，也可以是别的元素-->
<a href="#top">回到顶部</a>
<!--a元素实现锚点
设置href属性值为#id属性值-->
</body>- 下载功能:以a元素的Download属性链接，用做下载到本地文件
<body>
<a href="imgs/a.jpg" download="小姐姐.jpg">下载图片</a>
<!--使用href属性指定下籽文件路径，调转到指定文件
需使用HTML5新增的Download属性实现下载
也可自己设置原文件名-->
</body>- 动态为类选择器:
<style>
a:link {
/* 链接元素默认的文本颜色是蓝色 */
color: lightcoral;
}
a:hover {
/* 链接元素默认文本颜色是无变化的 */
color: lightskyblue;
}
a:active {
/* 链接元素默认的文本颜色是红色的 */
color: yellowgreen;
}
a:visited {
/* 链接元素默认的文本颜色是深紫色的 */
color: darkgreen;
}
input:focus {
border: 1px solid lightcoral;
outline: none;
}
</style>
</head>
<body>
<a href="04_抖音风格文本.html">这是一个链接</a>
<!-- 获取焦点 -->
<input type="text">
</body>二。图像:
- 图片元素:以SRC引入图片的路径
<style>
img{
width:560px;
}
</style>
</head>
<body><!--img元素为空元素
src - 设置引入指定图片的路径
* alt - 设置如果图片没有正确显示时的文本提示内容
* 改变图片显示的大小 - 保持原图片宽度和高度的比例(只设置宽度或高度)
* 元素的属性 - width和height
* CSS的属性 - width和height(建议使用这种方式)
-->
<img src="imgs/a.jpg"<!--引入图片--> alt="小姐姐">
</body>- 背景图像:以background-image属性引入一个或多个图像对页面进行显示
<style>
body{
background-image: url("imgs/wolongxueyuan.png");
/*引入背景图片*/
}
/*如裹引入图片大于页面，图片会显示不完整
如果引入图片小于页面，图片会重复显示（铺满整个页面）*/
</style>
</head>
<body>
<a href="4抖音风格文本.html"><img src="imgs/b.jpg" width="300px"></a>
<!---->
</body>- 平铺方式:background-repeat属性定义页面背景图像的平铺方式
<style>
div {
width: 800px;
height: 600px;
border: 1px solid black;
background-image: url("imgs/wolongxueyuan.png");
background-repeat: no-repeat;
/*background-position: top right;*//* 垂直 水平 */
background-position: 50px 100px;
background-size: 360px 360px;
}
/*背景图像平铺方式
repeat为默认值；页面水平和垂直方向平铺
repeat-x表示水平方向平铺
repeat-y表示垂直方向
no-repeat表示不平铺
背景图像定位-水平和垂直方向
水平方向-left(左)center(居中)right(右)
垂直方向-top(上)center(居中)bottom(下)*/
</style>
</head>
<body>
<div></div>
</body>- 背景关联:background-attachment属性用来设置背景图像是固定的还是跟页面滚轮拖动的
<style>
body{
height:2000px;/*设置高*/
background-image: url("imgs/wolongxueyuan.png");/*引入背景图片*/
background-repeat: no-repeat;/*不平铺引入的背景图像*/
background-attachment: fixed;
}
</style>
</head>
<body>
<h2>爱新觉罗</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</body>- background属性:用来设置多个背景属性的简写属性
- 精灵图(雪碧图):将一些小图标合成一个图片，进行移动抠图
<style>
div {
width: 20px;
height: 20px;
/*border: 1px solid black;*/
/*
* 由于页面中需要引入多个背景图像 -> 将HTML页面加载变慢
* 将多个背景图像整合成一张图片 -> 只需要引入一次
* background-position属性
* 设置背景图像的定位位置 - 实现现实背景图像中其中一个小图标
*/
/*background-image: url("imgs/toolbars.png");
background-repeat: no-repeat;
background-position: 0 -50px;*/
background: url("imgs/toolbars.png") no-repeat 0 -50px;
}
</style>
</head>
<body>
<div></div>
</body>【静态页面架构】CSS之链接和图像的更多相关文章
- 用手机自带uc浏览器查看静态页面，css样式不显示
问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...
- 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化
04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
- 【静态页面架构】CSS之定位
CSS架构 1.浮动: 是以float属性设置容器指定的位置 <style> div { width: 200px; height: 200px; } #qq { background-c ...
- html+css实现小米商城首页静态页面
学了一个星期的html和css,用新学的东西写点东西,仿照小米商城的首页按照它的页面布局盗用它的图片写了个小米商城的静态页面. 源代码:链接:https://pan.baidu.com/s/1qf63 ...
- 量体裁衣方得最优解：聊聊页面静态化架构和二级CDN建设
量体裁衣方得最优解:聊聊页面静态化架构和二级CDN建设 上期文章中我们介绍了CDN和云存储的实践,以及云生态的崛起之路,今天,我们继续聊一聊CDN. 我们通常意义上讲的CDN,更多的是针对静态资源类的 ...
- mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效
引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...
- 天猫浏览型应用的CDN静态化架构演变
原文链接:http://www.csdn.net/article/2014-01-22/2818227-CDN-Architecture 在天猫双11活动中,商品详情.店铺等浏览型系统,通常会承受超出 ...
- HTML5+CSS3静态页面项目-BusinessTheme的总结
因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...
- 浅谈php生成静态页面
一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...
随机推荐
- GAN实战笔记——第六章渐进式增长生成对抗网络（PGGAN）
渐进式增长生成对抗网络(PGGAN) 使用 TensorFlow和 TensorFlow Hub( TFHUB)构建渐进式增长生成对抗网络( Progressive GAN, PGGAN或 PROGA ...
- pyinstaller打包exe文件，运行时一闪而过
pyinstaller打包exe文件出现命令窗口一闪而过 原因:exe运行过程中出错了,解决这些错误就可以了 解决方法: 通过 cd path >> xxx.exe 在命令行中运行exe文 ...
- Ajax的疑难杂种详解
跨域问题 如图所示,这是通过jquery封装的ajax请求了一个本地的php文件(无框架),console提示CORS策略已阻止"来自来源"的"null":请求 ...
- java中的List接口(ArrayList、Vector、LinkedList)
一.List接口有三个常用的集合(ArrayList.Vector.LinkedList) ArrayList注意事项 ArrayList底层是用数组来实现数据存储的 底层是 transient Ob ...
- redirect route 路由传参
return redirect()->route('exams.sign',['token'=>$token,'id'=>$result['id']]); // 签到页面 Route ...
- tp 5 三级联动查询（自写）
思路: 1.定义路由 2.查询顶级分类(pid=0)发送至制图 3.循环展示 4.给顶级分类下拉框绑定内容改变事件(JS:onchange.JQ:change) 5.获取到选中的option的valu ...
- ElasticSearch安装 --- windows版
文件下载地址: 链接:https://pan.baidu.com/s/1_Cy_Sy1-vOvsUxliM-EZHQ 提取码:qpcv 定义: Elasticsearch 是一个分布式的搜索和分析引擎 ...
- Applied-Social-Network-Analysis-in-Python 相关笔记4
模型数据越多,Average系数就越小. perferential attachment model 有比较小的平均路径长度,但有着小的cc. rewire:重新连接 如果仅看这个共同的邻居数的话,数 ...
- 03 Java的数据类型分为两大类 类型转换 八大基本类型
数据类型 强类型语言:要求变量的使用要严格符合规定,所有变量都必须先定义后才能使用 Java的数据类型分为两大类 基本类型(primitive type) 数值类型 整数类型 byte占1个字节范围: ...
- stash —— 一个极度实用的Git操作
今天要介绍的 Git 操作就是 stash,毫不夸张地说,每个用 Git 的开发人员都一定要会懂怎么使用. 在介绍之前,不知道你有没有和我一样的经历:某一天,我正在一个 feature 分支上高高兴兴 ...