图片与文本基础

-----注释添加可以用/**/

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

例子  两种配置方法

  1. 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>里面

如何创建自己的收藏图标？使用图像处理软件或者以下某个联机工具

  1. http://favicon.cc
  2. http://www.favicongenerator.com
  3. http://www.freefavicon.com
  4. 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）的更多相关文章

  1. CSS实现同一行中图片和文本垂直居中

    1.为图片和文本都设置vertical-align:middle

  2. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  3. #WEB安全基础：HTML/CSS | 0x0 我的第一个网页

    #WEB安全基础:HTML/CSS系列,本系列采用第二人称以免你不知道我在对着你说话,以朋友的视角和你交流 HTML的中文名叫做超文本标记语言,CSS叫做层叠样式表 用HTML设计你的第一个网页,你需 ...

  4. 前端HTML介绍，标签介绍，基础选择器，CSS引入方法

    1. HTML 1.1 前端: 所有用户能看到的界面网页.pc端的应用exe.移动端应用app.微信小程序.手环的时间界面html5为基础的前端:网页.app.微信小程序 1.2 前端三剑客: 1.h ...

  5. 零基础HTML及CSS编码总结

    任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: * 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基 ...

  6. 基础DOM和CSS操作(一)

    DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...

  7. python3 tkinter添加图片和文本

    在前面一篇文章基础上,使用tkinter添加图片和文本.在开始之前,我们需要安装Pillow图片库. 一.Pillow的安装 1.方法一:需要下载exe文件,根据下面图片下载和安装       下载完 ...

  8. 任务五：零基础HTML及CSS编码练习加强版

    任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...

  9. 任务二：零基础HTML及CSS编码练习

    任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...

随机推荐

  1. javaAPI操作Hbase

    package chapter04; import org.apache.commons.lang.StringUtils; import org.apache.hadoop.conf.Configu ...

  2. docker-mysql-使用docker运行mysql8

    1, 下载镜像, 我用的是8 docker pull mysql: 2, 启动镜像 docker run \ --name mysql8 \ -p : \ -v /Users/wenbronk/Con ...

  3. 常用regex正则表达式

    [单个]字符匹配 任意字符:表示由任意字符组成 \\:匹配一个'\' \n:匹配换行 \t:匹配制表符 [单个]字符集(可以从里面任选一个字符) [abc]:可以是字母abc中任意一个 [^abc]: ...

  4. win7系统下安装Ubuntu18.04组成双系统

    最近在闲鱼上花了350大洋淘到了一台tinkpad sl510,这大概是一台发布于2009年的一台电脑了吧,处理器是酷睿二t440,2Gddr3的显卡,让我有点意外的是这台电脑的硬盘是7200转的32 ...

  5. solidity智能合约如何判断mapping值为空

    mapping值的判断问题 在Java这类编程语言中,我们可以获得Map里面的值然后与null或空来进行判断该key对应的值是否为空.可是在solidity中貌似并没有提供类似的判断.那么我们如果来进 ...

  6. oracle学习笔记（十六） PL/SQL 异常和goto语句

    PL/SQL 异常和goto语句 异常 预定义异常 oracle常见预定义异常: 错误号 异常错误信息名称 说明 ORA-0001 DUP_VAL_ON_INDEX 试图破坏一个唯一性限制 ORA-0 ...

  7. JAVA笔记 -- this关键字

    this关键字 一. 基本作用 在当前方法内部,获得当前对象的引用.在引用中,调用方法不必使用this.method()这样的形式来说明,因为编译器会自动的添加. 必要情况: 为了将对象本身返回 ja ...

  8. CAD绘图大师都在用的46组快捷键，高效绘图必备

    学习CAD 是一个需要慢慢积累的过程,千万不要遇到一点小困难就退缩,有困难我们就一起克服它!今天小编也是来帮助大家克服困难的!很多小伙伴学习CAD已经有一段时间了,但是发现自己的绘图效率还是不高,没关 ...

  9. js获取手机唯一标识码

    Device模块管理设备信息,用于获取手机设备的相关信息,如IMEI.IMSI.型号.厂商等.通过plus.device获取设备信息管理对象. imei: 设备的国际移动设备身份码 imsi: 设备的 ...

  10. Vue实战狗尾草博客后台管理系统第三章

    Vue实现狗尾草博客后台管理系统第三章 本章节,咱们开发管理系统侧边栏及面包屑功能. 先上一张效果图 样式呢,作者前端初审,关于设计上毫无美感可言,大家可根据自己情况设计更好看的哦~ 侧边栏 这里我们 ...