CSS架构

一。链接:

  1. 链接元素:通过使用a元素的href属性设置跳转到指定页面地址
  <style>

        a{

            color: blue;

            text-decoration: none;

        }

        a:hover{

            cursor:default;

            text-decoration: underline;

        }

    </style>

</head>

<body>

<a href="#">这是个链接</a>

</body>
  1. 绝对路径与相对路径:
  • 绝对路径:以域名开头，到域名后面可指定具体页面或资源的路径
  • 相对路径:在当前页面与资源处在一个目录就是相对路径
  • 当前页面与资源在子级目录，就是../目标文件
  • 当前页面与资源在父级目录，就是目录文件名/目标文件名
  • 当前页面与资源与父级目录处在同一个目录，就是..目录文件名/目标文件名
<body>

<a href="4抖音风格文本.html">这是抖音链接</a>

<br><!--<a>

        target表示当前链接打开方式

        _self：为默认值，表示打开当前窗口打开页面

        _blank:表示在新的窗口（页签）打开页面-->

<a href="mailTo:qh52562500@163.com">我的email</a>

<!--用法：配合hrf属性值是以"mailTo:"开头的

    问题 - 必须配合当前电脑中的默认的邮箱软件使用-->

</body>
  1. 锚点:通过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>
  1. 下载功能:以a元素的Download属性链接，用做下载到本地文件
<body>

<a href="imgs/a.jpg" download="小姐姐.jpg">下载图片</a>

<!--使用href属性指定下籽文件路径，调转到指定文件

    需使用HTML5新增的Download属性实现下载

    也可自己设置原文件名-->

</body>
  1. 动态为类选择器:
<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>

二。图像:

  1. 图片元素:以SRC引入图片的路径
<style>

        img{

            width:560px;

        }

    </style>

</head>

<body><!--img元素为空元素

           src - 设置引入指定图片的路径

      * alt - 设置如果图片没有正确显示时的文本提示内容

    * 改变图片显示的大小 - 保持原图片宽度和高度的比例(只设置宽度或高度)

      * 元素的属性 - width和height

      * CSS的属性 - width和height(建议使用这种方式)

 -->

<img src="imgs/a.jpg"<!--引入图片--> alt="小姐姐">

</body>
  1. 背景图像:以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>
  1. 平铺方式: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>
  1. 背景关联: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>
  1. background属性:用来设置多个背景属性的简写属性
  2. 精灵图(雪碧图):将一些小图标合成一个图片，进行移动抠图
<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之链接和图像的更多相关文章

  1. 用手机自带uc浏览器查看静态页面，css样式不显示

    问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...

  2. 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

    04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...

  3. 【静态页面架构】CSS之定位

    CSS架构 1.浮动: 是以float属性设置容器指定的位置 <style> div { width: 200px; height: 200px; } #qq { background-c ...

  4. html+css实现小米商城首页静态页面

    学了一个星期的html和css,用新学的东西写点东西,仿照小米商城的首页按照它的页面布局盗用它的图片写了个小米商城的静态页面. 源代码:链接:https://pan.baidu.com/s/1qf63 ...

  5. 量体裁衣方得最优解：聊聊页面静态化架构和二级CDN建设

    量体裁衣方得最优解:聊聊页面静态化架构和二级CDN建设 上期文章中我们介绍了CDN和云存储的实践,以及云生态的崛起之路,今天,我们继续聊一聊CDN. 我们通常意义上讲的CDN,更多的是针对静态资源类的 ...

  6. mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效

    引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...

  7. 天猫浏览型应用的CDN静态化架构演变

    原文链接:http://www.csdn.net/article/2014-01-22/2818227-CDN-Architecture 在天猫双11活动中,商品详情.店铺等浏览型系统,通常会承受超出 ...

  8. HTML5+CSS3静态页面项目-BusinessTheme的总结

    因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...

  9. 浅谈php生成静态页面

    一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...

随机推荐

  1. 一、ES6基础

    一.ECMAScript和JavaScript关系 JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标 准,但 ...

  2. C语言while循环语句

    循环语句三要素 1.在循环外给循环变量赋初值2.进入循环判断循环变量3.在循环体内修改循环变量,使循环趋近结束 2021-11-02

  3. 『现学现忘』Docker相关概念 — 1、云计算概念

    目录 1.云计算的概念 2.示例说明云计算 3.小故事说明云计算 "云计算"这个词,相信大家都非常熟悉. 作为信息科技发展的主流趋势,它频繁地出现在我们的眼前.伴随它一起出现的,还 ...

  4. .NET 6: New DateOnly and TimeOnly strcuts

    Background and Motivation .NET 目前有用于处理日期和时间的DateTime和DateTimeOffset.但在许多情况下,用户需要处理日期而根本不关心时间部分,也存在需要 ...

  5. 再议 MySQL 回表

    一:回表概述 关于回表的概念网上已经有很多了,这里不过多赘述.下面我们直接放一张图可能更直观说明什么是回表. 图中 非聚集索引也叫二级索引,二级索引本质上也是 一 个 B+ 树结构,与聚集索引(也叫主 ...

  6. IEAD关于git配置以及拉代码和提交代码

    1.提前安装git客户端,注册码云帐号 注册地址:https://gitee.com/signup 2.新建仓库 3.修改仓库信息 4.从IDEA拉git项目,下面两个地方都可以配置 首次创建需要输入 ...

  7. ASP.NET Core 6框架揭秘实例演示[25]：配置与承载环境的应用

    与服务注册一样,针对配置的设置同样可以采用三种不同的编程模式.第一种是利用WebApplicationBuilder的Host属性返回的IHostBuilder对象,它可以帮助我们设置面向宿主和应用的 ...

  8. docker-compose.yml 版本问题

    Docker Engine 与docker-compose version 之间的有以下关系: Compose file format Docker Engine 1 1.9.0+ 2.0 1.10. ...

  9. 二维码生成工具——QRCode

    下载QRCode的源代码:https://github.com/davidshimjs/qrcodejs 引入项目中:<script type="text/javascript&quo ...

  10. AFO以后的机房游记

    2019.8.6~8.8 周老师让我讲插头DP,理所当然地到机房备课(tuifei) dl24来了足足19个人.只可惜lsy没来,我们的phy,ljx去了首师附.看不到神仙打架了[哭] 插头DP这玩意 ...