博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
导航,头部,CSS基础
阅读量:4501 次
发布时间:2019-06-08

本文共 2027 字,大约阅读时间需要 6 分钟。

  1. 制作自己的导航条。

  2. HTML头部元素:

    1. <base>  定义了页面链接标签的默认链接地址
    2. <style>  定义了HTML文档的样式
      h2 {        background-color: coral;        font-family: "Adobe 楷体 Std R";        align-content: space-between;    }    a {        color: mediumvioletred;        font-size: 30px;        font-family: 'Operator Mono';    }

       

    3. <link>  定义了一个文档和外部资源之间的关系 

行内样式表

 

内嵌样式表

<head>

<style type="text/css">

.red{color: darkred;

font-family: "Adobe 繁黑體 Std B"}
</style>
</head>

<li class="red">全职</li>

<li class="red">兼职</li>
<li class="red">简历</li>
<li class="red">行业</li>

 

 

外部样式表

<link rel="stylesheet" href="templates\lxx.css">

</head>
<nav style="background-color: coral">
<img src="http://img.58cdn.com.cn/logo/58/252_84/logo-o.png?v=2">
<a href="http://gz.58.com/">首页</a>
<a href="http://gz.58.com/job.shtml?PGTID=0d100000-0000-3613-993b-49cdf3409c20&ClickID=3">招聘</a>
<a href="http://gz.58.com/house.shtml?PGTID=0d100000-0000-3613-993b-49cdf3409c20&ClickID=1">房子</a>
<input type="text" placeholder="输入你想找的内容">
<button type="submit">搜索</button>
</nav>

 

3.分别练习定义三类选择器:

HTML 选择器

CLASS 类选择器

ID 选择器

 整体代码如下:

    
登录页面

账号 :

密码 :

手机 qq 微信

下次自动登录

立即注册
忘记密码
  • 招聘
    1. 全职
    2. 兼职
    3. 简历
    4. 行业
  • 房产
    1. 租房
    2. 二手房
    3. 公寓
  • 二手车
    1. 三万内
    2. SUV
    3. 货车
  • 二手市场

运行结果如下:

 

转载于:https://www.cnblogs.com/zhuyinyinyin/p/7689956.html

你可能感兴趣的文章
利用 jQuery 来验证密码两次输入是否相同
查看>>
WIN7用户登录背景修改方法
查看>>
[转]HTTP请求行、请求头、请求体详解
查看>>
java基础之 超类Object
查看>>
C#中用webBrowser控件实现对Google地图的定位访问
查看>>
2016级算法期末上机-C.简单·Bamboo's Fight with DDLs III
查看>>
Android学习笔记之线程中调用UI控件
查看>>
maven:新建的maven工程需要添加一下插件
查看>>
Centos6.5下进行PHP版本升级
查看>>
An internal error occurred during: "Generating JAX-WS Web Services".Unable to create JAXBContext
查看>>
计算思维Computational Thinking
查看>>
将两个有序链表合并为一个新链表
查看>>
Map接口
查看>>
HDU 1556 Color the ball【差分数组裸题/模板】
查看>>
Codeforces Round #416 (Div. 2) A. Vladik and Courtesy【思维/模拟】
查看>>
Node.js + Express 多个 Layout 文件应用
查看>>
uva 11292 Dragon of Loowater (勇者斗恶龙)
查看>>
leetcode| Intersection of Two Arrays
查看>>
各种反射调用性能测试(赞一个)
查看>>
常用的sql语句
查看>>