图片与文本基础（html和css）
图片与文本基础
-----注释添加可以用/**/
5.1图片
1.gif图片：最大颜色数256，保存时采用无损压缩
2.JPEG图片:可以包含1670万种颜色，保存时采用有损压缩，压缩率小的质量更高。为了避免图片因压缩率过高而导致的像素化，一般使用PS或Adobe Fireworks优化。GIMP（http://www.gimp.org）是一款流行的，支持多平台的开源图像编辑器。Pixlr也提供了图片编辑器
另一个优化的办法就是使用图片的缩小版本，成为缩略图，一般将缩略图配置成图片链接，点击可显示更大尺寸的图片
3.PNG图片：“可移植网络图形”，结合了上面两者的优势，且支持无损压缩。
4.WebP图片格式
5.2 IMG元素
Img元素在网页上配置图片。Img元素是void元素，不成对使用（不需要成对使用起始和结束标记）。
例子：配置名为logo.gif的图片
<img src =”logo.gif” height=”200” width=”500” alt=”My Company Name”>
Str属性指定图片的文件名。Alt属性为图片提供文字代替
5.3图片链接
将图片作为超链接
<a href=”index.html”><img src =”logo.gif” height=”200” width=”500” alt=”My Company Name”></a>
缩略图链接是将小图配置成链接，点击它就可以显示由href属性指定的大图
<a href=”sunset.jpg”><img src =”logo.gif” height=”200” width=”500” alt=”My Company Name”></a>
5.4配置背景图片：
1.background-image属性
例子：body{background-image: url(texture1.png)}
注：url表示引用，如果要引用其他文件夹中的该图片，即url(某文件夹名/texture1.png)
2.background-attachment属性
使用background-attachment属性配置背景图片是在网页中滚动的还是将其固定。对应的值分别是scroll（默认）,fixed
5.5定位背景图片：
浏览器的默认行为是重复（平铺）背景图片，使之充满容器元素的整个背景
1.background-repeat属性.
属性值包括repeat(默认),repeat-y(垂直重复),repeat-x(水平重复),no-repeat(不重复)
2.定位背景图片:
可用background-position属性指定背景图片的位置（默认左上角）.
有效属性包括:百分比值，像素值，或者left , top, center, bottom(底部)和right
例子 两种配置方法
- h2{background-image : url(trilliumbg.gif);
background-position : right;
background-repeat : no-repeat; }
2. body { background-color:#f4ffe4;
color:#333333;
background-image: url(trilliumgradient.png);
background: url(trilliumfoot.gif) no-repeat right bottom,
url(trilliumgradient.png);
}
5.7用CSS配置字体
Font-family属性,用来配置字体
P { font-family :Verdana, Arial ,sans-serif}
5.8 CSS文本属性
关于网页文本CSS提供了大量的选项,常用的有:
Font-size, font-weight, font-style(倾斜显示), line-height, text-align(左右对齐), text-decoration , text-indent, text-transform, letter-spacing(间距)
5.10用CSS配置列表符号
5.11收藏图标
地址栏或网页标签上的小图标就是收藏图标，大小为16x16或者32x32像素
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
导入.css时rel=”stylesheet” 且要丢在<head>里面
如何创建自己的收藏图标？使用图像处理软件或者以下某个联机工具
- http://favicon.cc
- http://www.favicongenerator.com
- http://www.freefavicon.com
- http://www.xiconeditor.com
5.12图像映射
为图片配置多个可点击或可选择区域，它们链接到其他网页或网站。
<map id="fishing" name="fishing">
<area href="http://nature.org" shape="rect" coords="0,51,416,170" alt="The Nature Conservancy" title="The Nature Conservancy">
<area href="http://www.fishingdoorcounty.com" shape="rect" coords="24,188,339,283" alt="Door County Fishing Charter" title="Door County Fishing Charter">
</map>
<img src="fishingboat.jpg" usemap="#fishing" alt="Door County" height="350" width="416">
图片与文本基础（html和css）的更多相关文章
- CSS实现同一行中图片和文本垂直居中
1.为图片和文本都设置vertical-align:middle
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- #WEB安全基础：HTML/CSS | 0x0 我的第一个网页
#WEB安全基础:HTML/CSS系列,本系列采用第二人称以免你不知道我在对着你说话,以朋友的视角和你交流 HTML的中文名叫做超文本标记语言,CSS叫做层叠样式表 用HTML设计你的第一个网页,你需 ...
- 前端HTML介绍，标签介绍，基础选择器，CSS引入方法
1. HTML 1.1 前端: 所有用户能看到的界面网页.pc端的应用exe.移动端应用app.微信小程序.手环的时间界面html5为基础的前端:网页.app.微信小程序 1.2 前端三剑客: 1.h ...
- 零基础HTML及CSS编码总结
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: * 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基 ...
- 基础DOM和CSS操作(一)
DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...
- python3 tkinter添加图片和文本
在前面一篇文章基础上,使用tkinter添加图片和文本.在开始之前,我们需要安装Pillow图片库. 一.Pillow的安装 1.方法一:需要下载exe文件,根据下面图片下载和安装 下载完 ...
- 任务五：零基础HTML及CSS编码练习加强版
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...
- 任务二：零基础HTML及CSS编码练习
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...
随机推荐
- 搭建Jupyter学习环境
`python notebook`是一个基于浏览器的python数据分析工具,使用起来非常方便,具有极强的交互方式和富文本的展示效果.jupyter是它的升级版,它的安装也非常方便,一般`Anacon ...
- PHP获取网址详情页的内容导出到WORD文件
亲自测试效果一般, css的样式文件获取不到 如果没有特殊的样式 或者是内容里面包括样式的 直接输出有样式的内容 然后导出 这样还是可以的 class word { function start ...
- c# Winform 加载窗体
先来一个加载窗体代码 public partial class FrmLoading : Form { public BackgroundWorker updateDBWorker=new Backg ...
- Z从壹开始前后端分离【 .NET Core2.2/3.0 +Vue2.0 】框架之七 || API项目整体搭建 6.2 轻量级ORM
本文梯子 本文3.0版本文章 前言 零.今天完成的蓝色部分 0.创建实体模型与数据库 1.实体模型 2.创建数据库 一.在 IRepository 层设计接口 二.在 Repository 层实现相应 ...
- JAVA 设置模块间的依赖关系
项目目录概况 Demo01项目 Test01.java package com.sam.demo01; public class Test01 { public void ShowTest01() { ...
- Shadow broker=>fuzzbunch+metasploit 攻击外网测试以及metasploit大批量扫描目标IP
0x01 前言 4月14日,影子经纪人在steemit.com上公开了一大批NSA(美国国家安全局)“方程式组织” (Equation Group)使用的极具破坏力的黑客工具,其中包括可以远程攻破全球 ...
- CocoPods原理
CocoaPods 的原理是将所有的依赖库都放到另一个名为Pods的项目中, 然而让住项目依赖Pods项目, 这样,源码管理工作任务从主项目移到了Pods项目中. 1.Pods项目最终会编译成一个名为 ...
- Python对csv文件的读写操作
python内置了csv模块,用它可以方便的操作csv文件. 1.写文件 (1)写文件的方法一 import csv # open 打开文件有多种模式,下面是常见的4种 # r:读数据,默认模式 # ...
- [20191012]使用bash从sql_id计算hash_value.txt
[20191012]使用bash从sql_id计算hash_value.txt --//没有什么实际意义,仅仅验证方法是否可行.--//sql_id的计算是使用MD5算法进行哈希,生成一个128位的H ...
- mysql综合性练习
题目描述 设定有一个数据库,里面有4张表: 学生表(student) 课程表(course) 成绩表(score) 教师信息表(teacher) 表结构如下: 表一_学生表(student) 属性名 ...