16-11-10

今天的内容有点意思,学习了如何在网页上添加图片,以及如何赋予图片或文字连接。

首先接触一下编辑命令:<img>图片标签、src标记图片位置,alt标记图片属性,这两个命令都是<img>的属性,<a></a>超链接,其属性href添加链接地址,这个命令有三个作用:1、作为本地文件的超链接 2、连接到网站网址 3、标记连接的锚点 target可以打开新的网页保留原来网页,在制作文字链接时,会出现下划线标识,可以用text-decoration编辑除去样式。

下以制作百度、宜搜、搜狐等链接为例:

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

h2{

width: 100%;

height: 50px;

background-color: pink;

}

ul{

width: 660px;

height: 50px;

background-color: yellow;

margin: 0px auto;

}

li{

color: white;

background-color: grey;

width: 100px;

height: 50px;

float: left;

/*列表样式*/

list-style: none;

/*文本水平居中*/

text-align: center;

/*行高*/

line-height: 50px;

/*右外边框*/

margin-right: 10px;

/*链接样式*/

text-decoration: none;

}

li:hover{

background-color: red;

}

</style>

</head>

<body>

<h2>

<ul>

<!-- target打开新网页保留原网页 -->

<a target="blank" href="http://www.baidu.com"><li>百度</li></a>

<!-- href超链接 -->

<a target="blank" href="http://www.easou.com"><li>宜搜</li></a>

<a target="blank" href="http://www.souhu.com"><li>搜狐</li></a>

<a target="blank" href="http://www.3g.qq.com"><li>QQ</li></a>

<a target="blank" href="http://www.taobao.com"><li>淘宝</li></a>

<a target="blank" href="http://www.jd.com"><li>京东</li></a>

</ul>

</h2>

<!-- src添加图片地址,.代表当前文件所在文件夹,..表示当前文件所在文件夹的             上层文件夹         -->

<img src="./a/1.jpg" alt="图片描述">

<!-- alt表示对图片的描述,这里有占位的作用,也利于SEO(搜索引擎) -->

<img src="./a/1.jpg" alt="图片描述">

</body>

</html>

这样便可编辑出网页标头,其实只要条理清晰便不会很繁琐,只需注意区分样式中要编辑的对象,以及<body>中命令父子关系的罗列表达即可。到今天的学习便可制作简单的网页了。

时间: 2024-10-26 05:42:09

16-11-10的相关文章

剑指offer19:按照从外向里以顺时针的顺序依次打印出每一个数字,4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2,3,4,8,12,16,15,14,13,9,5,6,7,11,10.

1 题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2,3,4,8,12,16,15,14,13,9,5,6,7,11,10. 2 思路和方法 直接定义一个矩形,在矩形的四条边取值,程序大大简化. 3 核心代码 1 class Solution { 2 public: 3 vector<int> printMatrix(vector<

你是怎么把字符串“2016-11-16” 变为 “16/11/2016” 的? 【转】

一.前言: 有时候,我们需要对一些字符串中的字符进行位置变化处理.如 "2016-11-16" 需要调整为 "16/11/2016".我们知道有很多方法可以使用,比如split()拆分成数组后在进行拼接,也可以使用正则表达式的分组机制来进行处理.下面我们就将这种方法进行实例对比: 二.split()方法: split()方法主要是用于把一个字符串分割成字符串数组.我们分析下字符串 "2016-11-16",可以看出这个字符串是用比较规则的,数字之

nginx-1.11.10 download, install, start and stop

Environment:(CentOS 7) 1 [[email protected]_x1 nginx-1.11.10]$ uname -a 2 Linux netlab_x1 3.10.0-327.28.2.el7.x86_64 #1 SMP Wed Aug 3 11:11:39 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux Download: 1 # download and uncompress 2 wget http://nginx.org/downl

Ubuntu 11.10 (Oneiric)上编译带utrace补丁的内核 转

Ubuntu 11.10 (Oneiric)上编译带utrace补丁的内核 首先准备linux内核编译环境: sudo apt-get install fakeroot build-essential crash kexec-tools makedumpfile kernel-wedge kernel-package sudo apt-get build-dep linux sudo apt-get install git-core libncurses5 libncurses5-dev lib

Bentley OpenPlant PowerPID V8i SS5 08.11.10.427 1CD智能管道与仪表设计解决方案

Bentley OpenPlant PowerPID V8i SS5 08.11.10.427 1CD智能管道与仪表设计解决方案 OpenPlant PowerPID 是一款易于使用.由数据驱动的应用程序,可快速生成智能 P&ID,使用户能够捕获与重用开放格式的 信息.它可减少创建这些重要文档所需的时间并可在整个资产生命周期内共享所有流程信息.由于 OpenPlant PowerPID 是 围绕 ISO 15926 开放式数据架构而设计的第一款智能 P&ID 软件,因此,在 PowerPI

11.10/11.11/11.12 安装PHP511.13安装PHP7

- 11.10/11.11/11.12 安装PHP5 - 11.13 安装PHP7 - 扩展 - php中mysql,mysqli,mysqlnd,pdo到底是什么 - http://blog.csdn.net/u013785951/article/details/60876816 - 查看编译参数 http://ask.apelearn.com/question/1295 # 11.10安装PHP5 上 -  PHP官网www.php.net -  当前主流版本为5.6/7.1  1.   c

【转】ubuntu 11.10(32位系统)下编译android源码

原文网址:http://www.cnblogs.com/dwayne/archive/2011/11/16/2251734.html 本文介绍在ubuntu 11.10系统下编译android 2.3.3源码,编译之前请确定上两篇文章(http://www.cnblogs.com/dwayne/archive/2011/11/16/2250732.html和http://www.cnblogs.com/dwayne/archive/2011/11/11/2245383.html)中所需的准备工作

11.10晚间练习赛 一套全场爆零的好题

11.10晚间练习赛 一套全场爆零的好题 nodgd改的题面是真的令人不解 T1 数正方形 题面: 在\(N * N\)的点阵中任取4个点,回答: 问题1:这4个点恰好是"正放"的正方形的4个顶点的方案数是多少? 问题2:这4个点恰好是正方形(包括"正放"和"斜放")的4个顶点的方案数是多少? 下图为一个4*4的点阵,左图表示一种"正放"的方案,右图表示一种"斜放"的方案. ------ 看出来了就是水题

ubuntu 11.10 安装apache2 tomcat6

ubuntu 11.10 安装apache2 tomcat6 导读 Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun 和其他一些公司及个人共同开发而成.由于有了Sun 的参与和支持,最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 规范.因为Tomcat 技术先进.性能稳定,而且免费,因而深受Java

Centos6.7安装nginx-1.11.10

yum grouplist #查看已经安装的组 Installed Groups:  #已经安装的组 Available Groups:    #可以安装的组 同步系统时间 编译安装nginx 安装#yum -y groupinstall "Development Tools" "Server Platform Libraries" #tar xf nginx-1.10.2.tar.gz #cd nginx-1.10.2 #groupadd -r -g 108 ng