1. 全栈程序员必看首页

如何制作一个简单的网页(二)_简单的个人网页

全栈程序员-用户IM • • 未分类

如何制作一个简单的网页(二)_简单的个人网页使用HTML和CSS来制作一个简单的网页前言一、HTML1.1常见元素介绍1.2借助工具，浏览器开发者工具二、实现个人名片1.基本框架2.使用CSS美化1.CSS书写位置1、以元素的style属性来指定（内联样式）2、以style标签包裹（内部样式）3、以外部文件的方式 （外部样式）2.CSS中的选择器1.标签选择器2.id选择器3.类选择器4.子元素选择器前言HTML负责描述了网页的整体骨架CSS负责描述了页面样式利用其完成一个简单的个人建立网页。一、HTMLHTML不是

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

使用HTML和CSS来制作一个简单的网页

前言

HTML负责描述了网页的整体骨架
CSS负责描述了页面样式
利用其完成一个简单的个人建立网页。

一、HTML

HTML不是一门编程语言，而是用来告知浏览器如组织页面的标记语言，搭建浏览器骨架。

HTML是由元素组成的，元素存在于各种各样的标签中 HTML 注释格式为：

<!--这里是注释 -->

1.1常见元素介绍

1.标题

<!--<h1>到<h6>-->
<h1>字体大小示例</h1>
<h2>字体大小示例</h2>
<h3>字体大小示例</h3>
<h4>字体大小示例</h4>
<h5>字体大小示例</h5>
<h6>字体大小示例</h6>

代表着不同大小的字体，其中h1最大，h6最小

在这里插入图片描述

但是也能通过CSS修改字体大小，使用font-size+大小 来进行修改

<h6 style="font-size:50px">字体大小示例</h6>

在这里插入图片描述
2.段落和列表

段落

<p></p>

每个段落都是独占一行

列表：
无序列表 用·表示

<u1></u1>

有序列表 标序号

<o1></o1>

无序列表和有序列表中有列表项目

<li></li>

示例 无序列表

<h1>今日菜单</h1>
<ul><li>西红柿炒鸡蛋</li>
    <li>辣椒炒肉</li>
    <li>水煮鱼</li>
    <li>鱼香肉丝</li>
</ul>

在这里插入图片描述

示例 有序列表

<h1>今日菜单</h1>
<ol><li>西红柿炒鸡蛋</li>
    <li>辣椒炒肉</li>
    <li>水煮鱼</li>
    <li>鱼香肉丝</li>
</ol>

在这里插入图片描述

3.超链接

<a href="https://www.csdn.net/">CSDN</a>

实现CSDN链接，如果显示404就说明路径没有输对，其中地址有两种
1.完整的域名
2.相对路径（以当前文件为基准位置，然后去找到另外一个文件）

4.图片

<img src="bizhi.jpg" alt="图片加载失败">
src 后＋图片路径  alt后+（如果图片没有显示出来所打印的文字）文字

成功输入的话，就是你要插入的图片，路径错误的话，就显示你输入的文字
在这里插入图片描述
5.块级无语义元素
组织内容的

<div></div>

6.内联无语义元素

<span></span>

h1,ul,ol 都是称为块级元素，独占一行
而 a span 称为行内元素，不换行

1.2借助工具，浏览器开发者工具

打开方式F12或者右键点击检查，可以在浏览器界面进行调试

二、实现个人名片

1.基本框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myid</title>
</head>
<body>
<h1>陈东升</h1>
<h3>基本信息</h3>
<img src="pyy.jpeg" alt="图片加载失败">
<h4>求职意向：Java开发工程师</h4>
<h4>联系电话：13992759999</h4>
<h4>1104248983@qq.com</h4>
<a href="http://www.csdn.net">我的博客</a>
<h3>教育背景</h3>
<ol>
    <li>1.2004~2010 高新一小</li>
    <li>1.2010~2013 高新一中</li>
    <li>1.20013~2016 高新二中</li>
    <li>1.2016~2020 西安工业大学 计算机科学与技术 </li>
</ol>
<h3>专业技能</h3>
<ul>
    <li>熟悉掌握c/java语言，有良好的学习能力</li>
    <li>LeetCode 300+</li>
    <li>熟悉数据结构，操作系统，计算机网络等</li>

</ul>
<h3>我的项目</h3>
<h4>智能停车场</h4>
<div>开发时间2008年9月到2008年11月</div>
<div>功能介绍:智能管理停车系统，完善的体系建设,无需人工处理</div>
<h3>个人评价</h3>
<div>有良好的学习能力，希望能够进大厂工作</div>
</body>
</html>

在这里插入图片描述

2.使用CSS美化

1.CSS书写位置

CSS书写的位置：
主要有三种

1、以元素的style 属性来指定 （内联样式）

示例：

<h1 style="background-color: #80cbff" >陈东升</h1>

2、以style 标签包裹 （内部样式）

先指定针对那些元素应用属性，选中元素后再给指定的元素设置CSS属性

 <style> p{ 
      } </style>

p为选择器，先选中页面中的一个或者多个元素
括号内是针对这些被选中的元素来设置CSS属性。
使用键值对格式，键值之间使用：分割，键值对之间使用；分割

3、以外部文件的方式 （外部样式）

通过link来显示引用，并且一个HTML标签可以引用多个link 标签，即多个CSS文件

<link rel="stylesheet" href="（样式表地址）">

语法是和内部样式是相同的

2.CSS中的选择器

介绍几种常用选择器

1.标签选择器

直接写标签名，表示选中该页面中所有的对应名字的元素。
但是很多时候同一个标签我们希望其拥有不同的功能~~，这时候就可以使用id选择器了

2.id选择器

先给HTML标签指定一个id的值，在通过该id 选择器选中这个元素
通过指定一个id 去选择同一标签 不同的属性
格式 #+id名 id是唯一的不能重复
由于id选择器，要求元素只能有唯一的id，如果需要一次选中多个元素，此时不能使用id选择器了，就用使用类选择器了

3.类选择器

格式：.+类名
在标签中加上 class=“类名”
类选择器可以给任意多的元素引用对应的类

4.子元素选择器

内外选择，选择加空格 能选择到内部中，搭配其他选择器使用

基本命令：

width: 600px;//设置宽度
margin:0 auto; //上下外边距为0，左右外边距为自动
background-color: #F3F3F3;//设置背景颜色
/*颜色选择有多种模式 1.color : #FFFFFF 即# 红绿蓝三色 用十六进制表示 2.color :rgb(255,255,255); //白色 全是0为黑色 3.color :rgba(255,255,255,0) a为透明度选择。一般取值为0~1 */
text-align: center;//文本居中设置
 padding: 20px  0; //上下间距
padding :0  20px //左右间距
 display: flex; //水平放置

已经居中显示了 ，CSS有太多属性了，去查CSS帮助手册就好了，只是完成了一些基础的改变

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>myid</title> <style> .container{ 
   
            width: 600px;
            margin:0 auto;
            background-color: rgba(200,200,255,0.5);
        padding: 0 30px;
        }
        /**在CSS中是通配符，选中所有元素*/
        h1{ 
   
            text-align: center;
            padding: 20px;
        }
        .left{ 
   

        }
        .right{ 
   

        }
        .box{ 
   
            display: flex;
            justify-content: space-between;
        }

    </style>
</head>
<body>
<p>

</p>
<div class="container">
<h1 >个人简历</h1>

<h3>基本信息</h3>  <h3>陈东升</h3>
    <div class="box">
        <div class="left">
            <h4>求职意向：Java开发工程师</h4>
            <h4>联系电话：13992759999</h4>
            <h4>1104248983@qq.com</h4>
            <a href="http://www.csdn.net">我的博客</a>
        </div>
            <div class="right">
                <img src="pyy.jpeg" alt="图片加载失败">
            </div>

    </div>


<h3>教育背景</h3>
<ol>
    <li>1.2004~2010 高新一小</li>
    <li>1.2010~2013 高新一中</li>
    <li>1.20013~2016 高新二中</li>
    <li>1.2016~2020 西安工业大学 计算机科学与技术 </li>
</ol>
<h3>专业技能</h3>
<ul>
    <li>熟悉掌握c/java语言，有良好的学习能力</li>
    <li>LeetCode 300+</li>
    <li>熟悉数据结构，操作系统，计算机网络等</li>

</ul>
<h3>我的项目</h3>
<h4>智能停车场</h4>
<div>开发时间2008年9月到2008年11月</div>
<div>功能介绍:智能管理停车系统，完善的体系建设,无需人工处理</div>
<h3>个人评价</h3>
<div>有良好的学习能力，希望能够进大厂工作</div>
</div>
</body>
</html>

在这里插入图片描述
做的也不是太美观，但是终于使做成了。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/183421.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号