一、HTML骨架、代码回顾(标签、选择器)、Flex布局、CSS引入、版心居中、input、sprite、自定义列表dl

原创 于 2024-11-06 20:14:38 发布 · 265 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端

1. html骨架

<!-- 生成html框架 !+回车/Tab -->
<!DOCTYPE html>

<!-- html带<>的是标签，H5用标签摆放内容+css美化内容 -->
<!-- html表示整个网页 -->
<html lang="en">

<!-- head网页头部 放给浏览器看的代码 如css -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- title 网页标题，出现在网页标题栏 -->
  <title>第一个H5页面</title>
</head>

<!-- body网页主体 放给用户看的内容，比如图片和文字、视频、音频  -->
<body>
  111
</body>
</html>

2. 代码回顾

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>代码回顾</title>

  <!-- CSS -->
  <style>
    /* css注释 */
    /* 找标签用选择器
    （1. 标签选择器 h1{} (同名标签设置相同样式)
      2. 类选择器 .类名
      3. ） */
      
    /* 标签选择器 */
    h1 {
      font-weight: normal;
      /* font-size要加单位px */
      font-size: 50px;
      color: lightcoral;
      font-style: italic;
    }

    /* 类选择器 */
    .mycolor {
      color: blueviolet;
    }
  </style>
</head>

<body>
  <h1>一级标题1</h1>

  <!-- 一个标签可使用多个css类选择器，中间空格隔开 -->
  <!-- 类名未定义不报错 -->
  <h1 class="mycolor lei1">一级标题2</h1>
  <h1>一级标题3</h1>
</body>

</html>

3. Flex布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex</title>
  <style>
    .father{
      width: 800px;
      height: 300px;
      background-color: lightgoldenrodyellow;
      /* 布局方式flex 内容一行排列 */
      display: flex;
      /* 主轴对齐方式 */
      justify-content: space-between;
      /* 交叉轴对齐方式 */
      align-items: center;
      
    }
    .father div{
      width: 100px;
      /* height: 100px; */
      background-color: lightgreen;
      text-align: center;
    }
    .son1{
      /* 单个交叉轴对齐方式 stretch拉伸在交叉轴方向上设有尺寸时不生效 */
      align-self: stretch;
      /* 占用主轴方向上父级剩余的尺寸 与鸿蒙中layoutWeight类似 */
      flex: 1;
    }
  </style>
</head>
<body>
  <!-- 一行显示多块内容时使用flex布局 -->
  <div class="father">
    <div class="son1">1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

4. css引入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- link引入外部CSS文件，rel关系，stylesheet样式表，href路径 -->
  <link rel="stylesheet" href="./css/mycss.css">
  <!-- 实际开发做项目时用外部样式表，学习用内部样式 -->
</head>
<body>
  <div class="father">111</div>
</body>
</html>

5. 版心居中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>版心居中</title>
  <style>
    .box{
      width: 1200px;
      height: 100px;
      background-color: lightcyan;
      /* 版心居中 上下0，左右自动*/
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <!-- 版心居中 主要内容就叫版心 -->
  <div class="box">版心居中</div>
</body>

</html>

6. input单行输入文本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      border: none;
      /* 焦点框 （输入文本时的框）*/
      outline: none;
    }
    input::placeholder {
      color: red;
    }
  </style>
</head>
<body>
  <!-- 单行输入文本 -->
  文本框：<input type="text" placeholder="搜一搜">
  密码框：<input type="password" placeholder="请输入密码">
</body>
</html>

7. sprite

原图：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>sprite</title>
  <style>
    ul {
      display: flex;
      justify-content: space-evenly;
      height: 58px;
    }

    /* ul 里面的 第二个li 里面的div */
    ul li:nth-child(2) div {
      background-position: 0 -58px;
    }

    ul li:nth-child(3) div {
      background-position: 0 -116px;
    }

    ul li:nth-child(4) div {
      background-position: 0 -174px;
    }

    ul li {
      width: 190px;
      height: 58px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* CSS精灵 或CSS雪碧 （京东网页底部类似）
          优点：降低服务器请求次数，减少服务器请求时间，（外部资源需上传到服务器） */
      /* .ig2 {
            // 背景图位置:水平 垂直
            background-position: 0 -58px;
          }
  
          .ig3 {
            background-position: 0 -116px;
          }
  
          .ig4 {
            background-position: 0 -174px;
          } */
    }

    ul li div {
      width: 58px;
      height: 58px;
      background-image: url(./XTX_PC/images/sprite.png);
      margin-right: 20px;
    }

    ul li span {
      font-size: 28px;
    }
  </style>
</head>

<body>
  <ul>
    <li>
      <div class="ig1"></div>
      <span>价格亲民</span>
    </li>
    <li>
      <div class="ig2"></div>
      <span>物流快捷 </span>
    </li>
    <li>
      <div class="ig3"></div>
      <span>品质新鲜</span>
    </li>
    <li>
      <div class="ig4"></div>
      <span>售后无忧</span>
    </li>
  </ul>
</body>

</html>

8. 自定义列表dl

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>dl</title>
  <style>
    div {
      width: 1200px;
      display: flex;
      justify-content: space-between;
    }

    dl {
      width: 156px;
      background-color: lightcyan;
      line-height: 50px;
    }

    dl:nth-last-child(1) {
      width: 300px;
    }

    dd {
      margin-left: 0;
      font-size: 14px;
      color: gray;
      line-height: 30px;
    }
  </style>
</head>

<body>
  <div>
    <!-- dl自定义列表 -->
    <dl>
      <!-- dt列表名 -->
      <dt>购物指南</dt>
      <!-- dd列表项 列表项默认有左外边距 -->
      <dd>购物流程</dd>
      <dd>支付方式</dd>
      <dd>支付方式</dd>
    </dl>
    <dl>
      <dt>购物指南</dt>
      <dd>购物流程</dd>
      <dd>支付方式</dd>
      <dd>支付方式</dd>
    </dl>
    <dl>
      <dt>购物指南</dt>
      <dd>购物流程</dd>
      <dd>支付方式</dd>
      <dd>支付方式</dd>
    </dl>
    <dl>
      <dt>购物指南</dt>
      <dd>购物流程</dd>
      <dd>支付方式</dd>
      <dd>支付方式</dd>
    </dl>
    <dl>
      <dt>购物指南</dt>
      <dd>购物流程</dd>
      <dd>支付方式</dd>
      <dd>支付方式</dd>
    </dl>
  </div>

</body>

</html>

day13 - 布局版心、CSS常见命名、样式重置
u010544438的博客
08-09 140
本文主要介绍了网页布局中的版心设计、CSS命名规范、默认样式重置等核心内容。在版心布局方面，阐述了固定宽度设计在不同显示器上的适配问题，以及响应式布局对传统版心概念的弱化。文章详细整理了网页布局常用命名规范，包括主体结构、导航、功能模块等命名方式。针对默认样式问题，分析比较了通配符、reset.css和Normalize.css三种解决方案的优缺点，建议初学者使用reset.css。最后提供了实践作业，帮助巩固所学知识。全文系统性地梳理了网页布局的基础知识与实用技巧。
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 8603
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
完爆默认样式，好看的select下拉框（带搜索功能）
w_____w_____的博客
11-15 6410
标配版 豪华搜索版 这个是利用input框和ul来实现一个下拉框的效果。 具体代码如下 不带搜索： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .selectBox{ width: 300px; height: 36px; line-heig
html美化select样式,select样式美化（简单实用）
weixin_39999025的博客
06-19 5086
美化select，可以实用一个a标签将select嵌套进去，然后将相对定位，在将select绝对定位，美化即可.sel_mask{ /*将相对定位*/position:relative;width:200px;height:25px;background:#24A0D8;border-radius: 5px;box-shadow:1px 1px 5px #16...
html实例-select下拉菜单美化代码
在线学习web前端开发教程
12-07 2673
自带的select下拉菜单美观度实在不怎么样，并且不容易美化，当然我们可以模拟实现select下拉菜单，但是代码稍显复杂，不过也可以通过简单的CSS实现此效果，下面通过实例简单作一下介绍。 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="autho...
flex布局中，最后一个元素居右展示以及input组件与内容一样宽
qq_41973733的博客
04-08 502
写项目时有一个想法，filestate组件里面就是下面报修项目以及报修内容中我希望采用flex布局，希望最后一个元素在最右边该如何实现了 <div class="filestate"> <van-icon name="smile-comment-o" /> <h1>报修人</h1> <input class="reportman" type="text" v-model="rname"> </div&gt..
flex布局下，input框不能自适应
牛晓林的博客
04-15 1421
今天写登录页面，如图，验证码一栏出现了混乱。 图标和button都时固定值，input给了flex:1。发现图标缩小了，button里的字也折行了。加大button的宽度，只会是图标越来越小，输入框却没啥变化。 查了一下，才知道，input框有个默认的最小宽度。所以解决方法就是把最小宽度改一下。 另一种方法是在input框外面套一个div，给这个div设flex:1。 ...
CSS——网页版心和布局流程
热门推荐
流楚丶格念的博客
07-02 1万+
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下： 1、确定页面的版心（可视区）。 2、分析页面中的行模块，以及每个行模块中的列模块。 3、制作HTML结构 。 4、CSS初
HTML+CSS模仿百度首页(gird+flex布局)
mingluosunyi的博客
08-23 1003
文章目录HTML+CSS模仿百度首页Grid布局分析flex布局分析代码 HTML+CSS模仿百度首页 Grid布局分析 百度界面分为三块：头部导航栏、中部主体部分、页脚。 中间主体部分又可以分为左右的空白区和版心。 因此我选择用grid布局将页面划分成9个区域： ‘head head head’ ‘left-blank main right-blank’ ‘foot foot foot’ flex布局分析 flex适合一维的布局，用来完成导航栏、版心和页脚的布局非常合适。 导航栏可以分为左右两个大块，
css 布局版心
最新发布
05-08
### CSS 布局实现版心效果的方法 #### 方法一：传统 `margin` 居中方式 通过设置 `.container` 的宽度并结合 `margin: 0 auto;` 可以实现版心的水平居中。这种方式适用于固定宽度的版心设计。 ```css .container {...
一款非常好看下拉框样式(select)
09-27
一款非常好看下拉框样式(select)主要调用了已经封装好的样式文件selectBox.htc,才实现了下拉框的美化......
一款非常漂亮的表单select下拉框样式
10-26
一款非常漂亮的表单select下拉框样式 示例地址：http://blog.youkuaiyun.com/homezzm/archive/2009/10/26/4729057.aspx
select 漂亮样式
06-22
select的漂亮样式，完全div+css+js实现，更易懂，更清晰
flex布局小总结
qq_39285660的博客
01-18 1301
问题：在哪里可以使用flex布局？任何一个容器都可以使用Flex布局,但是需要注意版本的兼容性 容器可以理解为是项目的父元素。项目可以是块级元素，也可以是行内元素容器和项目六大属性：我们可以用容器属性控制项目的：方向、轴线转折方向、主轴对齐方式、交叉轴对齐方式、多根轴对齐方式 用项目属性控制：排列顺序、放大比例、缩小比例、默认项目本身大小、单个项目的对齐方式需要注意兼容性：对安卓、ios兼容性
HTML5骨架+HTML基础
2301_80661529的博客
02-16 943
HTML5骨架实则是HTML文本的基本格式。
html美化select样式,CSS美化select下拉框
weixin_32955881的博客
06-19 4760
select在PC端上的显示是一个特别蛋疼的事情，咱们先看一下代码以及截图，咱们可以看到得到，每个浏览器之间的差别。还有当select不加border和加border时候的不一样的显示方式。对，这些浏览器就是这么牛逼，牛逼到让人猝不及防。我都没敢把IE7的截图放出来。CGL青格勒CGL青格勒1CGL青格勒2CGL青格勒3*{ margin:0; padding:0;}select{ display...
HTML入门之代码骨架
m0_61794291的博客
01-08 1078
最近在学习html，在这里分享下自己的学习笔记~ <!DOCTYPE html> //告诉浏览器使用哪种html版本来显示网页 <html lang="en"> //定义当前文档显示的语言 //中文为“zh-CN" <head> <meta charset="UTF-8"> //规定html文档使用的字符编码 <meta http-equiv="X-UA-Compatible" content="IE=edge"> &lt
html 好看的下拉列表,用JavaScript来美化HTML的select标签的下拉列表效果
weixin_39574928的博客
06-03 1415
首先通过一个例子来回顾一下select标签的用法：VolvoSaabFiatAudi然后效果一般时这样的：美与丑暂且不论...所有html元素中select算是比较坑爹的一个。他让人抓狂的地方主要是：不同的浏览器显示的默认下拉框样子不完全相同IE下无法手动设置select的高度(这是最坑爹的！)，只能靠font-size撑起来select右侧的下拉箭头是无法使用背景消除的，这就导致无法使用css进...
html骨架生成及基本标签
lbcbjtlhmjq的博客
01-31 4515
html骨架生成及基本标签
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值