HTML+CSS 静态页面练习

已于 2023-09-23 17:10:54 修改
阅读量79 收藏
点赞数
文章标签： html css 前端
于 2023-09-23 17:10:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smilingSML/article/details/133211009
版权

 

 效果图是以下，没有用图标引入，做的潦草了一点，重复代码也有很多，暂时没达到节约代码的水平。

<div class="all w clearfix">
    <div class="first">
      <div class="s40 firstleft fl"><i class="pt"></i><i class="pb"></i></div>
      <p class="fl">Reading</p>
      <div class="s40 firstright fr">
        <i class="yuan y1"></i>
        <i class="yuan y2"></i>
        <i class="gang g1"></i>
        <i class="gang g2"></i>
      </div>
    </div>
    <!--  -->
    <div class="second">
      <p>Difficulty level</p>
      <div class="secondbot">
        <div class="bottwo"></div>
        <i class="purpel"></i>
      </div>
    </div>
    <!--  -->
    <div class="third">
      <div class="thirtouxiang fl">SML</div>
      <div class="thirtcontent fr">
        <p>
          <span class="bul">Salut</span>,je <span class="green">m'appelle</span> Elle,
          <span class="bul">quoi</span> de <br> <span class="pink">neuf</span> aujourd'hui
        </p>
      </div>
    </div>
    <!--  -->
    <div class="fourth">
      <div class="fourthrigth fr">
        <p>Rien,juste <span>ennuye</span></p>
      </div>
    </div>
    <!--  -->
    <div class="fifth">
      <span>Quel</span>
      <span>est</span>
      <span>ton</span>
      <span>metier</span>
      <span>?</span>
    </div>
    <!--  -->
    <div class="sexth">
      <div class="sexthbox box1">
        <span>Q</span>
        <span>W</span>
        <span>E</span>
        <span>R</span>
        <span>T</span>
        <span>Y</span>
        <span>U</span>
        <span>I</span>
        <span>O</span>
        <span>P</span>
      </div>
      <div class="sexthbox box2">
        <span>A</span>
        <span>S</span>
        <span>D</span>
        <span>F</span>
        <span>G</span>
        <span>H</span>
        <span>J</span>
        <span>K</span>
        <span>L</span>
      </div>
      <div class="sexthbox box3">
        <div class="zxc jiantou fl">
          <div class="jt1"></div>
          <div class="jt2"></div>
        </div>
        <span class="fl">Z</span>
        <span class="fl">X</span>
        <span class="fl">C</span>
        <span class="fl">V</span>
        <span class="fl">B</span>
        <span class="fl">N</span>
        <span class="fl">M</span>
        <div class="zxc cha fr">
          <div class="zfx1"></div>
          <div class="zfx2">
            <div class="zfx22">
              <i class="pt"></i><i class="pb"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="sexthbox box4">
        <div class="box yiersan fl">123</div>
        <div class="space fl">space</div>
        <div class="box go fr">Go</div>
      </div>
      <div class="seventh">
        <div class="smiling fl">
          <i class="s11">.</i>
          <i class="s12">-</i>
          <i class="s13">.</i>
        </div>
        <div class="smiling fr">
          <i class="s11">.</i>
          <i class="s12">-</i>
          <i class="s13">.</i>
        </div>
      </div>
      <div class="footer">

      </div>
    </div>
  </div>
.all {
      width: 300px;
      height: 647px;
      background-color: #f5f9ff;
      border-radius: 40px;
      overflow: hidden;
    }
    .first {
      position: relative;
      width: 260px;
      height: 40px;
      margin: 40px 20px 28px 20px;
    }
    .s40 {
      width: 40px;
      height: 40px;
      background: -webkit-linear-gradient(top,#e0e3f1,#e3e3f8,#eaedfa,#f2f6fd);
      border-radius: 15px;
    }
    .firstleft .pt,
    .firstleft .pb {
      position: absolute;
      width: 10px;
      height: 10px;
      border-top: 2px solid #000;
      border-right: 2px solid #000;
    }
    .firstleft .pt{
      top: 9px;
      left: 15px;
      transform: rotate(132deg);
    }
    .firstleft .pb {
      top: 22px;
      left: 16px;
      transform: rotate(311deg);
    }
    .firstright .yuan {
      position: absolute;
      width: 8px;
      height: 8px;
      border: 3px solid #000;
      border-radius: 50px;
    }
    .firstright .y1{
      top: 10px;
      right: 22px;
    }
    .firstright .y2{
      top: 20px;
      right: 10px;
    }
    .firstright .gang {
      position: absolute;
      border: 2px solid #000;
    }
    .firstright .g1 {
      top: 13px;
      right: 10px;
      width: 10px;
    }
    .firstright .g2 {
      top: 24px;
      right: 21px;
      width: 8px;
    }
    .first p {
      width: 160px;
      line-height: 40px;
      text-align: center;
      margin-left: 10px;
      font-weight: bold;
      font-size: 15px;
    }
    /*  */
    .second {
      width: 260px;
      height: 30px;
      margin: 0 20px;
    }
    .second p {
      font-size: 5px;
      color: #ccc;
      margin-bottom: 3px;
    }
    .secondbot {
      position: relative;
      width: 260px;
      background-color: #eeeefd;
      border-radius: 50px;
    }
    .bottwo {
      width: 165px;
      border: 2px solid #7c59c3;
      border-radius: 50px;
    }
    .purpel {
      position: absolute;
      top: -3px;
      left: 165px;
      width: 12px;
      height: 6px;
      background-color: #7c59c3;
      border-radius: 5px;
    }
    /*  */
    .third {
      width: 260px;
      height: 80px;
      margin: 28px 20px 0 20px;
    }
    .thirtouxiang {
      width: 33px;
      height: 33px;
      background-color: #7c59c3;
      border-radius: 50px;
      line-height: 33px;
      color: #ccc;
      font-size: 12px;
      text-align: center;
    }
    .thirtcontent {
      width: 217px;
      height: 80px;
      background-color: #ffffff;
      border-radius: 10px 15px 15px 15px;
      box-shadow: -5px 20px 10px -4px #eaeaff;
    }
    .thirtcontent p {
      margin: 25px 0 0 19px;
      font-size: 9px;
    }
    .thirtcontent p .bul {
      color: #7b8ec7;
    }
    .thirtcontent p .green {
      color: #51aeb9;
    }
    .thirtcontent p .pink {
      color: #d98dc4;
    }
    /*  */
    .fourth {
      width: 260px;
      height: 54px;
      margin: 10px 20px 0 20px;
    }
    .fourthrigth {
      width: 140px;
      height: 54px;
      line-height: 54px;
      background-color: #7752db;
      border-radius: 20px 10px 20px 20px;
      text-align: center;
      font-size: 10px;
    }
    .fourthrigth p {
      color: #fbebff;
    }
    .fourthrigth span {
      padding-bottom: 2px;
      border-bottom: 2px dotted #bc5de3;
    }
    /*  */
    .fifth {
      width: 260px;
      height: 60px;
      line-height: 60px;
      background-color: #fff;
      border-radius: 10px 10px 20px 20px;
      margin: 36px 20px 16px 20px;
      box-shadow: 0 20px #e5e4fe;
    }
    .fifth span {
      background: -webkit-linear-gradient(top,#eaedfa,#f2f6fd,#fbfefe);
      padding: 10px 5px;
      border-radius: 15px;
      font-size: 10px;
      font-weight: 400;
    }
    .fifth span:nth-child(1) {
      margin-left: 15px;
    }
    /*  */
    .sexth {
      width: 294px;
      height: 221px;
      border-radius: 0 0 35px 35px;
      margin: 0 3px;
      background-color: #eeeffe;
      overflow: hidden;
    }
    .sexthbox.box1,
    .sexthbox.box2,
    .sexthbox.box3{
      width: 284px;
      height: 37px;
      margin: 5px;
    }
    .sexthbox.box1 span,
    .sexthbox.box2 span {
      height: 37px;
      line-height: 37px;
      padding: 8px 5px 10px 5px;
      background-color: #fff;
      margin-left: 5px;
      border-radius: 8px;
    }
    .sexthbox.box2 span:first-child {
      margin-left: 20px;
    }
    .sexthbox.box3 .zxc {
      position: relative;
      width: 40px;
      height: 37px;
      line-height: 37px;
      background-color: #fff;
    }
    .sexthbox.box3 .jiantou {
      border-radius: 15px 5px 5px 5px;
    }
    .sexthbox.box3 .jiantou .jt1{
      position: absolute;
      width: 0;
      height: 0;
      line-height: 0;
      font-size: 0;
      right: 10px;
      top: 0;
      border: 10px solid transparent;
      border-bottom-color: #0e111e;
    }
    .sexthbox.box3 .jiantou .jt2 {
      position: absolute;
      top: 20px;
      left: 16px;
      width: 10px;
      height: 10px;
      background-color: #0e111e;
    }
    .sexthbox.box3 .cha {
      border-radius: 5px 15px 5px 5px;
    }
    .sexthbox.box3 .cha .zfx1 {
      position: absolute;
      width: 0;
      height: 0;
      line-height: 0;
      font-size: 0;
      right: 27px;
      top: 12px;
      border: 8px solid transparent;
      border-right-color: #0e111e;
    }
    .sexthbox.box3 .cha .zfx2 {
      position: absolute;
      top: 12px;
      left: 13px;
      width: 15px;
      height: 15px;
      background-color: #0e111e;
    }
    .sexthbox.box3 .cha .zfx2 .zfx22 {
      position: relative;
    }
    .sexthbox.box3 .cha .zfx2 .pt,
    .sexthbox.box3 .cha .zfx2 .pb {
      position: absolute;
      width: 7px;
      height: 7px;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
    }
    .sexthbox.box3 .cha .zfx2 .pt{
      top: -2px;
      left: 2px;
      transform: rotate(132deg);
    }
    .sexthbox.box3 .cha .zfx2 .pb {
      top: 8px;
      left: 2px;
      transform: rotate(311deg);
    }
    .sexthbox.box3 span {
      height: 37px;
      line-height: 37px;
      padding: 3px 5px 10px 5px;
      background-color: #fff;
      margin-left: 8px;
      border-radius: 8px;
    }
    .sexthbox.box4{
      width: 284px;
      height: 35px;
      margin: 5px;
    }
    .sexthbox.box4 .box{
      width: 67px;
      height: 35px;
      background-color: #7955da;
      color: #fff;
      line-height: 35px;
      text-align: center;
    }
    .yiersan {
      border-radius: 10px 20px 10px 20px;
    }
    .go {
      border-radius: 20px 10px 20px 10px;
    }
    .space {
      width: 140px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background-color: #ffffff;
      margin: 0 5px;
      border-radius: 10px 10px 20px 20px;
    }
    /*  */
    .seventh {
      width: 285px;
      height: 20px;
      margin: 15px 5px 5px 5px;
    }
    .smiling {
      position: relative;
      width: 20px;
      height: 20px;
      border: 1px solid #000;
      border-radius: 50px;
      margin: 0 20px;
    }
    .smiling i {
      position: absolute;
    }
    .smiling .s11 {
      top: -15px;
      left: 2px;
      font-size: 20px;
    }
    .smiling .s12 {
      top: 2px;
      left: 4px;
    }
    .smiling .s13 {
      top: -15px;
      left: 10px;
      font-size: 20px;
    }
    .footer {
      width: 90px;
      height: 2px;
      border-radius: 3px;
      background-color: #ddddf2;
      margin: 10px 0 0 100px;
    }

body,
button,
dd,
dl,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
li,
ol,
p,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
}
body {
    line-height: 1.5;
    font-size: 14px;
    color: #333;
}
a {
    text-decoration: none;
    color: #333;
}
li {
    list-style: none;
}
/* 解决图片间隙问题 */
img {
    vertical-align: middle;
}
/* 万能的清浮动样式 */
.clearfix::before,
.clearfix::after {
    content: "";
}
.clearfix::after{
    clear: both;
}
/* 左浮动 */
.fl {
    float: left;
}
/* 右浮动 */
.fr {
    float: right;
}
.w {
    width: 1200px;
    margin: 0 auto;
}

smilingSML
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML+CSS实现静态注册页面
弱弱的小雨鸟
10-05 6848
最终效果   实现代码 注册页 * { padding: 0; margin: 0; font-size: 15px; } .red { margin: 0 auto; width: 650px; color: #D22; } .blue { font-weight: bold; color: #22F;
HTML+CSS个人静态网页设计
QQ_____365392777的博客
08-11 648
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
H5 , Css基础练习
ambition_star的博客
12-26 521
h5,css基础练习 1.内边距练习padding <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
html+css网页练习一
qq_52108058的博客
02-02 7029
阅读下列说明、效果图和HTML代码，进行静态网页开发。 这个某项目中的其中一个活动页，应用html和css技术完成页面的布局。项目包含主页index.html、style.css，css和img文件夹分析： 4、style.css 二、改革进展与成效管理平台页面 1、要求 阅读下列说明、效果图和HTML代码，进行静态网页开发。 项目名称为“改革进展与成效管理平台”，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含normalize.css文件；img文件夹包含用到的图片。大
html+css练习题之九寨沟静态页面
qq_52108058的博客
01-19 565
根据各自的位置设置响应的布局，注意浮动带来的影响，input的属性placeholder描述输入字段预期值的简短的提示信息，©符号等。第一部分banner，分为多个盒子，背景为banner，中间照片部分为banner_one，项目栏部分为banner_two。将总页面分为4部分，由上到下分别为banner、body、bottom_top、bottoms名字随意起，尽量见名知意。两个盒子有相同之处也有不同之处，合理利用相同特点，简化代码。通过层层盒子嵌套勾勒出页面的轮廓，再加以修饰。
HTML和CSS练习布局（设计图、静态文件、源码全套）
ajiuyuan的博客
06-08 543
适合HTML和CSS初学者，练习HTML和CSS。初学HTML和CSS找不到合适的设计稿？没有静态图片？没有成功的源码参考？往下看，你都可以轻松的找到他。 2、less文件
html+css网页练习四
qq_52108058的博客
02-07 4162
阅读下列说明、效果图，完成静态页面。 某购物网站首页页面局部效果。当鼠标悬停到导航文字上时，背景色会变为红色。现在我们需要编写该网站效果图部分代码。 项目包含首页index.html、img文件夹和css文件夹，页面效果如图所示。 4、style.css 二、活动页面 1、要求 阅读下列说明、效果图和HTML代码，进行静态网页开发，主要应用HTML和css3完成。 这个某项目中的其中一个活动页，应用HTML5和css3技术完成页面动画。鼠标没经过是图1，当鼠标经过是图2，当鼠标经过遮罩层像翻书一样显示出来
HTML + CSS + 练习静态页面 + 实现豆瓣首页
06-30
在这个“HTML + CSS + 练习静态页面 + 实现豆瓣首页”的项目中，我们将深入理解这两门技术，并通过实践来提升技能。 HTML是网页内容的标记语言，用于定义网页的元素结构。例如，`<html>`标签表示整个文档，`<head>`...
HTML + CSS 实现淘宝页面首屏静态网页项目练习.zip
最新发布
12-14
HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面...
Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
这个“Web入门初学者纯静态页面练习”是针对那些刚刚接触Web前端开发的学习者设计的，旨在帮助他们掌握HTML和CSS的基本概念以及布局与浮动的设计技巧。 HTML是网页内容的结构语言，它定义了网页的各个元素，如标题...
整站静态页面练习
05-05
个人整站页面练习
个人静态网页 适合初学者练习网页设计
12-07
这是我自己做的个人静态主页。里面涉及了切片 flash。布局。适合初学者对网页的了解。
HTML+css静态网页制作简单实例
06-16
是一款HTML+css的静态网页做成的，没有动态数据库连接
html+css纯静态页面练习：仿网易云
08-24
包含网易云首页和网易云商城两个页面
大学生网页制作之美食篇html+css静态网页设计
06-14
在“大学生网页制作之美食篇html+css静态网页设计”这个项目中，学生将学习如何运用HTML、CSS以及JavaScript这三种基础的Web开发技术来创建一个以美食为主题的静态网页。这个设计实例对于初学者来说非常实用，因为它...
HTML / CSS 实践练习
MartinYP的博客
07-13 579
HTML / CSS 实践练习记录博客
HTML+CSS 静态网页练习
qq_62117561的博客
06-06 290
这是我平时练习的一些静态的HTML+CSS小项目,有的是原创的,有的是看着临摹的,内容会不断更新的
HTML，CSS 静态网页练习
风的季节
05-27 9475
效果图：代码链接：https://blog.csdn.net/linton1/article/details/80464947 
html-css练习题（天天生鲜静态网页制作）文末有完整版代码地址链接
热门推荐
采菊东篱下，Python满乾坤！
09-03 5万+
素材地址： 链接: https://pan.baidu.com/s/17aHx1VQpI5yjc67TFoq1yQ 提取码: bk1s 先来看一下效果图： 主要要求： 注：最下面有素材链接地址可以自己练习使用 /* 1.login最外侧盒子设定高29 背景颜色#f7f7f7 下边框1 */ /* 1.1login内容部分设置 高20 宽1200 居中*...
html+css笔试附答案 (2).pdf
11-19
本资源是一份针对HTML+CSS技术的笔试题目及答案，适合用于复习和测试对这两种...通过这份试卷，学习者可以检验自己对HTML元素结构和CSS布局、样式选择、定位、背景处理等方面的知识掌握程度，并针对性地进行强化练习。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值