自学CSS，part 1

已于 2022-02-06 12:07:54 修改
阅读量96 收藏
点赞数 1
文章标签： html css
于 2021-08-19 16:08:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Titijiang233/article/details/119651271
版权

目录

1.语法规范

2.css基础选择器

3.font-

4.text-

CSS的三种样式表

综合案例

1.语法规范

· css通常写在head里的最下面

· 写在style里面

·样式后面加 ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改成什么样式} */
        p {
            color: pink;
            /* 修改文字为12像素 */
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>番茄酱在花瓶旁边</p>
</body>
</html>

2.css基础选择器

<1>标签选择器（class）

只能选择一整个类的标签

<2>类选择器

单独选择几个或几个标签

类命名规则

中文名称中文名称
头header左右中left right center
内容content/continer登陆条loginbar
尾footer标志logo
导航nav广告banner
侧栏sidebar页面主体main
栏目column热点hot
页面外围控制整体布局宽度wrapper新闻news
下载download子导航subnav
菜单menu子菜单submenu

可以同时使用多个类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 类选择器口诀：样式点定义 */
        .pink {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .blue {
            width: 100px;
            height: 100px;
            background-color:cornflowerblue;
        }
        .font35 {
            font-size: 35;
        }
    </style>
</head>
<body>
    <div class="pink"></div>
    <div class="blue font35">小路</div>
    <div class="pink"></div>
</body>
</html>

<3>id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* id选择器的口诀，样式#定义，结构id调用，只能调用一次，别人切勿使用 */
        #pink {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        #blue {
            width: 100px;
            height: 100px;
            background-color:cornflowerblue;
        }
        #font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div id="pink"></div>
    <div id="blue">蹄蹄酱233</div>
    <div id="font35"></div>
</body>
</html>

<4>通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通配符 * 选择器不需要调用，自动就给所有元素使用样式 */
        * {
            color:pink;
        }
    </style>
</head>
<body>
    <div>我是</div>
    <span>蹄蹄酱233</span>
    <ul>
        <li>爱吃酱猪蹄</li>
        <li>爱喝冰可乐</li>
    </ul>
</body>
</html>

3.font-

font-family

改字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .blod {
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <h2>花枯萎了</h2>
    <p class="blod">水干了</p>
    <p>天热了</p>
</body>
</html>

font-size

改像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .blod {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <h2>花枯萎了</h2>
    <p class="blod">水干了</p>
    <p>天热了</p>
</body>
</html>

font-weight

数字后面不加单位，表示粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .blod {
            font-weight: 700;
            /* 要么写 font-weight: 400; */
            /* 要么写 font-weight: normal; */
        }
    </style>
</head>
<body>
    <h2>花枯萎了</h2>
    <p class="blod">水干了</p>
    <p>天热了</p>
</body>
</html>

 font-style

文字样式

例如让p变成斜体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-style: italic;
        }
    </style>
</head>
<body>
    <h2>花枯萎了</h2>
    <p class="blod">水干了</p>
    <p>天热了</p>
</body>
</html>

综合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 想要 div 文字变为 倾斜 加粗 字号设置为16px 并且 字体是 微软雅黑； */
        div {
            font-style: italic;
            font-weight: 100;
            font-size: 16px;
            font-family: 'Microsoft yahei';
        }
    </style>
</head>
<body>
    <div>三生三世十里桃花，一心一意百行代码</div>
</body>
</html>

复合用法

写复合用法必须同时写 字体大小 和字体 

body {

            font: font-style font-weight font-size/line-heigth font-family;

        }

4.text-

text-align:

改变文字对齐方式

属性值解释
left向左对齐
right向右对齐
center居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

text-decoration

文本装饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之文本装饰</title>
    <style>
        div {
            /* 下划线 */
            text-decoration: underline;
            /* 删除线 */
            text-decoration: line-through;
            /* 上划线 */
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <div>泡泡泡泡泡泡</div>
</body>
</html>

将链接的下划线设置为默认，就可以取消下划线 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之文本装饰</title>
    <style>
        a {
            /* 下划线 */
            /* text-decoration: underline; */
            /* 删除线 */
            /* text-decoration: line-through; */
            /* 上划线 */
            /* text-decoration: overline; */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#">泡泡</a>
</body>
</html>

首行缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之首行缩进</title>
    <style>
        p {
            text-indent: 20px;
        }
    </style>
</head>
<body>
    <p>未来汽车的终极形态是什么？没有方向盘，无需人类驾驶；车内不分驾驶、副驾驶座，乘客只需要放松地坐、躺在车内；全程只需要语音与汽车交流，它就能在充当司机的同时，充当智能助理……在昨天举行的百度世界大会上，百度创始人、董事长兼首席执行官李彦宏带来了他的答案：一辆汽车机器人。</p>
    <p>首款L5级“汽车机器人”亮相</p>
    <p>在世界大会上亮相的这款汽车机器人可谓“颠覆”：外观上，自动鸥翼门、全玻璃车顶与外部传感器融为一体，极具科技感。在内部，汽车机器人车内不设方向盘、踏板，并拥有超大曲面屏、智能控制台、变光玻璃、零重力座椅等智能化配置。</p>

</body>
</html>

行间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之行间距</title>
    <style>
        div {
            line-height: 16px;
        }
        p {
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div>中国人</div>
    <p>未来汽车的终极形态是什么？没有方向盘，无需人类驾驶；车内不分驾驶、副驾驶座，乘客只需要放松地坐、躺在车内；全程只需要语音与汽车交流，它就能在充当司机的同时，充当智能助理……在昨天举行的百度世界大会上，百度创始人、董事长兼首席执行官李彦宏带来了他的答案：一辆汽车机器人。</p>
    <p>首款L5级“汽车机器人”亮相</p>
    <p>在世界大会上亮相的这款汽车机器人可谓“颠覆”：外观上，自动鸥翼门、全玻璃车顶与外部传感器融为一体，极具科技感。在内部，汽车机器人车内不设方向盘、踏板，并拥有超大曲面屏、智能控制台、变光玻璃、零重力座椅等智能化配置。</p>

</body>
</html>

CSS的三种样式表

1.内部样式表（行内式）

2.行内样式表（嵌入式）

3.外部样式表（链接式）

内部样式表

在head里面写样式，单独写到style标签内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之行间距</title>
    <style>
        div {
            line-height: 16px;
        }
        p {
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div>中国人</div>
    <p>未来汽车的终极形态是什么？没有方向盘，无需人类驾驶；车内不分驾驶、副驾驶座，乘客只需要放松地坐、躺在车内；全程只需要语音与汽车交流，它就能在充当司机的同时，充当智能助理……在昨天举行的百度世界大会上，百度创始人、董事长兼首席执行官李彦宏带来了他的答案：一辆汽车机器人。</p>
    <p>首款L5级“汽车机器人”亮相</p>
    <p>在世界大会上亮相的这款汽车机器人可谓“颠覆”：外观上，自动鸥翼门、全玻璃车顶与外部传感器融为一体，极具科技感。在内部，汽车机器人车内不设方向盘、踏板，并拥有超大曲面屏、智能控制台、变光玻璃、零重力座椅等智能化配置。</p>

</body>
</html>

行内样式表

直接在body里面每段文字里面修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之行间距</title>
    <style>
        div {
            line-height: 16px;
        }
        p {
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div>中国人</div>
    <p>未来汽车的终极形态是什么？没有方向盘，无需人类驾驶；车内不分驾驶、副驾驶座，乘客只需要放松地坐、躺在车内；全程只需要语音与汽车交流，它就能在充当司机的同时，充当智能助理……在昨天举行的百度世界大会上，百度创始人、董事长兼首席执行官李彦宏带来了他的答案：一辆汽车机器人。</p>
    <p>首款L5级“汽车机器人”亮相</p>
    <p style="color: rosybrown;">在世界大会上亮相的这款汽车机器人可谓“颠覆”：外观上，自动鸥翼门、全玻璃车顶与外部传感器融为一体，极具科技感。在内部，汽车机器人车内不设方向盘、踏板，并拥有超大曲面屏、智能控制台、变光玻璃、零重力座椅等智能化配置。</p>

</body>
</html>

外部样式表

html和css在两个文件，通过link标签把他们连接起来

<link rel="stylesheet" href="style.css">

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之行间距</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>史莱姆黏黏的</div>
</body>
</html>

css

div {
    color: antiquewhite;
}

综合案例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未来三天天气预报</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>08月19日：未来三天全国天气预报</h1>
    <div>2021-08-19 08:00:00 来源：<a href="http://www.weather.com.cn/" target="__blank">中国天气网</a> 
        <input type="text" value="请输入查询" class="search"> <button class="btn">查询</button></div>
    <hr>
    <h2>北方地区将有降水过程</h2>
    <h3>一、昨日四川盆地福建及甘肃宁夏内蒙古等地出现较强降雨</h3>
    <p>昨日08时至今日06时，四川盆地、云南西部、贵州西部、湖北西部、湖南、江西西部和南部、福建中南部、广东中东部等地部分地区出现大到暴雨，四川雅安、湖南衡阳、江西宜春、福建福州和莆田等局地大暴雨（100～222毫米），上述地区最大小时降雨量50～98毫米。</p>
    <p>另外，新疆北部、青海东部、甘肃中部和东部、宁夏大部、陕西北部、山西中北部、内蒙古中部、河北西北部等地出现中到大雨，甘肃庆阳和平凉、宁夏固原、陕西榆林、山西吕梁、内蒙古呼和浩特等局地暴雨或大暴雨（100～190毫米）。</p>
<h3>二、重点天气预报</h3>
<h4>1. 北方地区将有降水过程</h4>
<p>19日至21日，西北地区东部、华北、黄淮、江淮、东北地区等地自西向东有降水过程，上述部分地区将有中到大雨，局地暴雨，局部并伴有短时强降水等强对流天气。</p>
<p>预计，8月19日08时至20日08时，华北中东部、黄淮、四川盆地西部、内蒙古东北部、辽宁西部、陕西南部、甘肃东部等地部分地区有大到暴雨，其中，河北中部、天津南部、山东南部、河南北部等地部分地区有大暴雨（100～130毫米）。上述部分地区伴有短时强降水（最大小时降雨量20～40毫米，局地可超过60毫米），局地有雷暴大风等强对流天气。为此，中央气象台8月19日06时发布暴雨蓝色预警。</p>
<p class="center"><img src="图1.jpg" alt=""></p>
<h3>三、未来三天具体预报</h3>

<p>8月19日08时至20日08时，华北中东部、黄淮、四川盆地西部、内蒙古东北部、辽宁西部、陕西南部、甘肃东部等地部分地区有大到暴雨，其中，河北中部、天津南部、山东南部、河南北部等地部分地区有大暴雨（100～130毫米）。内蒙古中部、吉林西部等地部分地区有4～6级风（见图2）。</p>
<p class="center"><img src="图2.jpg" alt=""></p>
<p>图2 全国降水量预报图（8月19日08时-20日08时）</p>

<p>8月20日08时至21日08时，内蒙古东部、东北地区西部和南部、黄淮东部和南部、江淮、江汉东部、江南北部等地部分地区有中到大雨，其中，内蒙古东部、辽宁东南部、山东东南部、安徽西南部等地部分地区有暴雨（50～90毫米）（见图3）。</p>
<p class="center"><img src="图3.jpg" alt=""></p>
<p>图3 全国降水量预报图（8月20日08时-21日08时）</p>

<p>8月21日08时至22日08时，东北地区大部、西北地区中东部、西南地区东北部等地部分地区有中到大雨，其中，黑龙江西部和南部、吉林东北部、甘肃东部、陕西中部、四川盆地北部等地部分地区有暴雨或大暴雨（100～150毫米）（见图4）。</p>
<p class="center"><img src="图4.jpg" alt=""></p>
<p>图4 全国降水量预报图（8月21日08时-22日08时）</p>

<h3>四、影响与关注</h3>
<p>1. 关注19-21日西北地区东部、华北、黄淮及东北等地降雨过程及内蒙古等地强对流天气；</p>
<p>2. 关注四川盆地局地强降雨及可能引发的次生灾害；</p>
<p>3. 关注陕甘宁降雨对旱情缓和作用；</p>
<p>4. 关注21-24日四川盆地至黄淮、江淮一带较强降雨过程。</p>
</body>
</html>

css

效果图

Titijiang233
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CSS基础（新手入门教程）
m0_61225117的博客
10-26 3509
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。
CSS 各类选择器 第一节
菜鸟心声：学的不仅是技术，更是梦想！
11-12 449
CSS 在 HTML 中使用 CSS 1.内联样式 内联样式是在元素属性中设置样式。此种方式很适合用于测试样式和快速查看样式效果，但是不推荐在整个文档上使用此方法。 在使用此方法时，必须在每一个元素上重复设置各个样式，这样既增加文档大小，又增加文档 的更新和维护难度。例如，所有的元素 都设置了宽度大小，如果需要修改，就需要反复更改多处样式定义内容。 <nav> <ul> <li style="float:left;padding: 4px 5px 0px
CSS(网站开发)自学笔记
Mike峰
07-22 599
CSS(html5)网站开发语言自学笔记
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
2401_84152825的博客
04-19 932
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-giLHKEZa-1713474385859)]
在css中怎么写三角形,css写三角形
weixin_35651191的博客
08-03 117
简单介绍MR21和MR22MR21和MR22都可以用来调整价格,MR21是更改的单个物料的价格,MR22更改的是库存总价值,所以MR21可以更改移动平均价(V)或标准价(S)的物料价格.MR22只能更改移动平均价(V)的物料价 ...微信授权步骤与详解 -- c&num;篇微信授权步骤与详解 -- c#篇 注:这里不涉及界面操作,只介绍代码操作. 1.基本原理如下: 从图上所知,第一步用户...
【奔腾的骏马---Html+CSS实现（附源代码）】，2024年最新面试要掌握这几个关键点的技巧
m0_60721907的博客
04-18 724
先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。 既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包含大
【奔腾的骏马---Html+CSS实现（附源代码）】
2401_84152825的博客
04-21 581
外链图片转存中…(img-XRO6nWhY-1713632209203)][外链图片转存中…(img-0b4gsPN0-1713632209204)]
【Maven】自学笔记
lklalmq的博客
06-23 712
Maven 是一款为 Java 项目管理构建、依赖管理的工具（软件），使用 Maven 可以自动化构建、测试、打包和发布项目，大大提高了开发效率和质量。Maven就是一个软件，掌握安装、配置、以及基本功能（项目构建、依赖管理）的理解和使用即可！例如我们项目需要第三方依赖如：Druid连接池、MySQL数据库驱动和Jackson JSON等处理。那么我们可以将想要的依赖项的信息编写到Maven工程的配置文件，Maven就会自动下载并复制这些依赖项到项目中，无需自己导入jar包，管理jar!
SpringMVC自学笔记
INFINITE_WAR的博客
04-03 1330
视频：BV1aE41167Tu 官方文档：https://docs.spring.io/spring-framework/docs/current/reference/html/web.html
CSS完全自学手册 施迎等编著.part1
09-11
编程红宝书（珍藏版）分卷1 CSS完全自学手册 施迎等编著
CSS完全自学手册 施迎等编著.part2
09-11
编程红宝书（珍藏版）分卷2 CSS完全自学手册 施迎等编著
CSS完全自学手册 施迎等编著.part3
09-11
编程红宝书（珍藏版）分卷3 CSS完全自学手册 施迎等编著
自学使用HTML和CSS进行网站发布
01-10
中文名: 每天一小时自学使用HTML和CSS进行网站发布 (第6版，涵盖HTML5) 原名: Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Includes New HTML5 Coverage, 6th Edition 作者: Laura Le...
javaweb整合开发 完全自学手册 技术文档PartI
02-17
1. **Java Web开发**：JavaWeb是基于Java技术的Web应用程序开发，主要涉及Servlet、JSP（JavaServer Pages）和JavaBean。Servlet是Java编写的服务器端程序，处理HTTP请求；JSP则是HTML与Java代码的混合，用于创建...
HTML实现图片查看与隐藏
你羡慕的生活都是你没熬过的苦。
07-08 446
你好呀，我是小邹。在网页设计中，提供一个直观且用户友好的图片查看功能是提升用户体验的重要一环。本文将详细介绍如何使用HTML、CSS和JavaScript来实现图片的查看与隐藏功能。通过本教程，你将学会如何让页面上的图片在点击时放大显示，以及如何通过再次点击或点击背景来关闭放大的图片。
通过 tomcat 让手机访问到电脑写的 html 网页
最新发布
m0_75138009的博客
07-10 529
通过 tomcat运行的文件，只要处于同一个局域网下，就可以被访问，不过我们需要将防火墙对 8080 这个端口设置允许外部访问，或直接把防火墙先暂时关闭。我们需要在在环境变量中配置 JAVA_HOME 和 CATALINA_HOME 两个变量，分别装入 jdk 和 tomcat 的路径。之前实现的 html 小项目只能在自己的电脑上展示，如果要在其他电脑或者在手机上就看不到网页了。要运行 tomcat ，我们必须要确保我们的环境变量中有 jdk。想要在手机上访问自己写的网页，我们可以借助 tomcat。
HTML最快速最简单
07-08 283
HTML 元素以开始标签起始，HTML 元素以结束标签终止空元素在开始标签中进行关闭（以开始标签的结束而结束）元素的内容是开始标签与结束标签之间的内容。
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
qq_45831414的博客
07-08 327
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
CSS快速掌握，自学版
10-08
从小白到精通，小白通用版CSS自学笔记，完全版。 CSS简介>基础语法>书写格式>基本选择器>高级选择器>等等 以及源码笔记>小白菜鸡通用 作者QQ：2405024212

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Titijiang233

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值