HTML学习之郑州师范学院主页样式实现

已于 2024-12-18 19:18:33 修改
阅读量61 收藏
点赞数
文章标签： html 前端 css
于 2023-04-14 20:26:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Boyfml/article/details/130161438
版权

1.大top页面banner

1.首先是构造出基本的框架

框架为

741b9240233ec1237e074279bc2a8cf8.png

右侧left_top和left_bottom嵌套在nav这个容器里

 

 

大概先框架为这个样子

bd6f9337e3dec24d9fdb1fec44b22cbf.png

接着将div定位到它应该在的位置

先移动banner，这里有个细节是我们用margin-top会出现子动父跟的效果，因为border重合(网络上很多解决方法)，但是我们可以用position属性去改变，banner为realtive相对定位，而title和hd为绝对定位absloute

设置了position后，我们就可以用tblr去设置位置进行定位了

 

 

————————————————————————————

那么具体代码为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>郑州师范学院</title>
    <!--    引入外部css-->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>


<!--设置上面部分top大完整的div-->
<div class="top">
    <!--设置banner-->
    <div class="banner">
        <!--        banner左logo-->
        <div class="logo">

        </div>
        <div class="nav">
            <!--        banner右上-->
            <ul class="left_top">

            </ul>
            <!--        banner右下-->
            <ul class="left_bottom">

            </ul>
        </div>
        <!--        banner下的title-->

    </div>
<!--    top下左边的小标题-->
    <div class="title">

    </div>
<!--    top最下方的切换点-->
    <div class="hd">

    </div>

</div>
</body>
</html>

 

/*清除默认边距*/
* {
    margin: 0;
    padding: 0;
}

/*设置大top的大小*/
.top {
    width: 100%;
    height: 600px;
    background-color: darkseagreen;
}

/*设置大top下的banner样式*/
.top > .banner {
    height: 110px;
    width: 1200px;
    background-color: red;
    margin: 0 auto;
    top: 60px;
    position: relative;
}

/*大top下的title样式*/
.title {
    height: 45px;
    width: 90px;
    background-color: chartreuse;
    top: 470px;
    position: absolute;
}
/*大top下的hd*/
.hd{
    width: 100%;
    height: 40px;
    background-color: aquamarine;
    top: 560px;
    position: absolute;
}

/*设置banner下的样式*/
/*banner下的logo样式*/
.banner > .logo {
    width: 25%;
    height: 100%;
    background-color: royalblue;
    float: left;
}

/*banner下的nav样式*/
.banner > .nav {
    width: 75%;
    height: 100%;
    background-color: #ffc400;
    float: left;
}


/*nav下的上列表样式*/
.nav > .left_top {
    height: 70px;
    width: 100%;
    background-color: rebeccapurple;
}

/*nav下的下列表样式*/
.nav > .left_bottom {
    height: 40px;
    width: 100%;
    background-color: rosybrown;
}

的

 

 

 

分别对div进行定位后的效果

b280b488587b1f5c348ff8fcaae0f897.png

 

2.对内容进行补充

logo

我们采用img标签即可

<div class="logo">
  <img src="./images/logo%20(1).png" alt="logo">
</div>

css样式，其实也简单，无非就是给img加上padding去移动位置，而logo这个div设置box-sizing属性，防止撑大div即可

.banner > .logo {
  width: 25%;
  height: 100%;
  background-color: #a63632;
  float: left;
  box-sizing: border-box;
}
.logo>img{
  padding: 20px 22px;
}

30f47f51270831c096c9ee36edabb3ba.png

nav

第二个我们写nav

这个其实是banner中最复杂的，每一个li标签中都是风格相同的a标签

那么我们先写出一个包含a标签的li再调整样式，然后copy即可

 

 

hd

b8aec06fbd9cbaf9900b6d607bfaff86.png

这个实现还是比较简单的，只需我们给每一个li设置宽高样式再设置margin-top和margin-left即可

前提还是将这几个包裹到容器里

title

这个很简单，只实现单个样式的话

e07a504ef55b8fd08c1f1936d5d5d04f.png

 

伪类实现hd切换banner背景图片和title文字

它官网是用js自动定时切换的，当然鼠标点击上去也会有切换样式的效果应该也是用的js。

那么用伪类实现，比较繁琐。需要单独定义每一个id。so不写了

2.bottom页面构造

383c06462bba91b679a373cfcbce3408.png

那么首先是一个大的bottom包裹

接着将页面分为bottom_left bottom_center bottom_right 三个div

剩下的拿一个举例子比如bottom_left 分为bottom_left_top bottom_left_bottom

接着细分样式即可，那么我们先构造出大概的样式

先把三个框搞出来，并设置好间距

0ea66a57e66db01c8e38ccc67f6be200.png

那么再对每个框里的div继续搞出来也可以搞一个框填充内容再下一个。那么使用这一种即可

bottom_left内容构造

591a03e263737c5f2473916846073a02.png

那么我们先构造出bottom_left_top 和bottom_left_bottom 这两个div

f8776b9b898dcf792c5f48e7d79d1171.png

 

 

上面bottom_left_top

继续老步骤先构造出布局

3c7babe92deaacee61ec7288225f37b2.png

可以看到同样也是很多div堆积在一起，我们同样先构造出框架

e57f5bbb35aa9bd38153c98a72f3ecd3.png

我就不填充色块了，直接填充内容了。

。。。还是先填充色块，构造出样式再补充内容，不然布局其实很混乱

总之最终效果

c0efab1e8a44c9181588ef40ed6ca951.png

下面bottom_left_bottom

f7d82eaf2c2fe908dbb57cb751461c65.png

这次我们的思路可以是给先构造容纳img的div和另一个div然后float:left

再将另一个容器里面分为上下两个容器，然后就简单了。

 

674f0712ec1a5dfcc12f5e43bd74bc47.png

        <div class="bottom_left_bottom">
            <div class="icon_logo">
                <img src="./images/weibo.png" alt="微博图标">
            </div>
            <div class="logo_info">
                <div class="Name">
                    <a href="#">@郑州师范学院微博</a>
                    <span>4月01日 14:09</span>
                </div>
                <div class="weibo_info">
                    <p>#欢乐郑师# 来自郑师树上的小插画，被食堂放的《甄嬛传》洗脑了吧</p>
                    <a href="#">+关注</a>
                </div>
            </div>
        </div>
/*设置bottom_left_bottom的样式*/
.bottom > .bottom_left > .bottom_left_bottom {
    width: 100%;
    height: 101px;
    border: 1px solid #bdcadc;
}

/*设置bottom_left_bottom下的样式*/
.bottom_left_bottom > .icon_logo {
    height: 100%;
    width: 20%;
    float: left;
}

.bottom_left_bottom > .icon_logo > img {
    margin: 25px 27px;
}

.bottom_left_bottom > .logo_info {
    height: 100%;
    width: 80%;
    float: left;
}

/*logo_info下的样式*/
.logo_info>.Name{
    width: 100%;
    height: 50%;
    padding-top: 17px;
    box-sizing: border-box;
}
.logo_info>.Name>a{
    text-decoration: none;
    color: #ae1c1c;
    font-size: 16px;
}
.logo_info>.Name>span{
    padding-left: 173px;
    color: #ae1c1c;
}

 

bottom_center内容构造

38d3238147244a0d949ef1ca063b3587.png

首先上面部分直接修改字体就行，宽度继承父亲的即可。而下面的高基本都可以抄第一个

那么我们还是先把框架色块搞出来

c71e12e216f952c3064b0273e83273c9.png

那么对内容进行填充即可

<!--bottom中间元素-->
<div class="bottom_center">
  <!--        bottom_center的上面-->
  <div class="bottom_center_top">
    <div class="bottom_center_title">
      <h3>通知公告</h3>
      <a href="#">更多</a>
    </div>
    <ul class="bottom_center_list">
      <!--                第一个li-->
      <li>
        <div class="time_icon">
          <span class="day">31</span>
          <span class="ym">2023-03</span>
        </div>
        <div class="icon_info">
          <span class="source">国际教育学院</span>
          <br>
          <span class="notice_name">
            <a href="#">关于开展专科层次中外合作办学年度报告</a>
          </span>
        </div>
      </li>
      <!--                第二个li-->
      <li>
        <div class="time_icon">
          <span class="day">30</span>
          <span class="ym">2022-11</span>
        </div>
        <div class="icon_info">
          <span class="source">党政办公室</span>
          <br>
          <span class="notice_name">
            <a href="#">郑州师范学院2022年信息公开年度报</a>
          </span>
        </div>
      </li>
      <!--                第三个li-->
      <li>
        <div class="time_icon">
          <span class="day">29</span>
          <span class="ym">2022-11</span>
        </div>
        <div class="icon_info">
          <span class="source">党政办公室</span>
          <br>
          <span class="notice_name">
            <a href="#">中共郑州师范学院委员会关于巡视整改情</a>
          </span>
        </div>
      </li>
      <!--                第四个li-->
      <li>
        <div class="time_icon">
          <span class="day">14</span>
          <span class="ym">2022-11</span>
        </div>
        <div class="icon_info">
          <span class="source">佚名</span>
          <br>
          <span class="notice_name">
            <a href="#">2022年中外合作办学评估信息公示</a>
          </span>
        </div>
      </li>
      <!--                第五个li-->
      <li>
        <div class="time_icon">
          <span class="day">08</span>
          <span class="ym">2022-09</span>
        </div>
        <div class="icon_info">
          <span class="source">中心城市研究院</span>
          <br>
  <span class="notice_name">
  <a href="#">关于举办第五届国家中心城市建设高层论</a>
  </span>
  </div>
  </li>
  <!--                第六个li-->
  <li>
  <div class="time_icon">
  <span class="day">09</span>
  <span class="ym">2022-05</span>
  </div>
  <div class="icon_info">
  <span class="source">佚名</span>
  <br>
  <span class="notice_name">
  <a href="#">中外合作办学本科层次2021年报公示</a>
  </span>
  </div>
  </li>
  </ul>
  </div>
  <!--        bottom_center的下面-->
  <div class="bottom_center_bottom">
  <div class="icon_a">
  <a href="#">招标公告</a>
  </div>
  <ul class="bottom_center_bottom_list">
  <!--                第一个li-->
  <li>
  <a href="#">离退休人员2023年生日慰问品(蛋糕提货</a>
  <span>03-28</span>
  </li>
  <!--第二个li-->
  <li>
  <a href="#">中小学生资格考试面试租赁设备采购项目中</a>
  <span>03-28</span>
  </li>
  <!--                第三个li-->
  <li>
  <a href="#">离退休人员2023年生日慰问品（蛋糕提货券）</a>
  <span>03-15</span>
  </li>
  <!--                第四个li-->
  <li>
  <a href="#">中小学教师资格考试面试租赁设备采购项目</a>
  <span>03-15</span>
  </li>
  </ul>
  </div>
  </div>

/*bottom_center的样式*/
.bottom > .bottom_center {
  height: 510px;
  width: 340px;
  float: left;
  margin: 20px 20px;
}
.bottom_center_top{
  border: 1px solid #bdcadc;
}
/*bottom_center_title下的样式*/
.bottom_center_title{
  width: 100%;
  height: 49px;
  background-color: #ffffff;
  border-bottom: 3px solid #9b4649;
}
.bottom_center_title > h3 {
  height: 100%;
  width: 25%;
  float: left;
  color: #333;
  padding: 10px 27px;
  background: url("../images/TitleIcon.png") no-repeat 11px 18px;
}
.bottom_center_title > a {
  text-decoration: none;
  color: #ae1c1c;;
  float: right;
  height: 100%;
  width: 24%;
  padding-left: 46px;
  padding-top: 13px;
  box-sizing: border-box;
  background: url("../images/More.png") no-repeat 35px 19px;
}
/*bottom_center_list下的样式*/
.bottom_center_list{
  height: 340px;
  width: 100%;
  border: 1px solid #bdcadc;
  list-style: none;
}
.bottom_center_list>li{
  width: 88%;
  margin-left: 20px;
  margin-right: 20px;
  height: 13%;
  margin-top: 6px;
  float: right;
}
.bottom_center_list>li>.time_icon{
  height: 100%;
  width: 53px;
  float: left;
  background: url("../images/TimeIcon.png") no-repeat 0px 1px;
}
.bottom_center_list>li>.time_icon>.day{
  font-size: 15px;
  padding: 16px;
  color: #ffffff;
}
.bottom_center_list>li>.time_icon>.ym{
  font-size: 13px;
}
.bottom_center_list>li>.icon_info{
  height: 100%;
  width: 243px;
  float: left;
  font-size: 13px;
  padding-left: 8px;
  box-sizing: border-box;
}
.bottom_center_list>li>.icon_info>.source{
  font-size: 13px;
  color: #999999;
}
.bottom_center_list>li>.icon_info>.notice_name>a{
  text-decoration: none;
  color: #4c4c4c;
}
.bottom_center_list>li>.icon_info>.notice_name>a:hover{
  color: #ae1c1c;
}



/*设置bottom_center_bottom的样式*/
.bottom_center_bottom{
  margin-top: 17px;
  width: 100%;
  height: 103px;
  float: right;
}
/*bottom_cneter_bottom下的样式*/
.bottom_center_bottom>.icon_a{
  height: 100%;
  width: 9%;
  background-color: #af4a46;
  padding-left: 7px;
  padding-top: 8px;
  box-sizing: border-box;
  float: left;
}
.bottom_center_bottom>.icon_a>a{
  text-decoration: none;
  color: #ffffff;
}
.bottom_center_bottom>.icon_a:hover {
  background-color: #ae1c1c;
}
.bottom_center_bottom_list{
  height: 100%;
  width: 85%;
  margin-left: 18px;
  float: left;
  list-style: none;
  border: 1px solid #bdcadc;
}
.bottom_center_bottom_list>li{
  height: 25%;
  width: 100%;
}
.bottom_center_bottom_list>li>a{
  text-decoration: none;
  width: 75%;
  font-size: 12px;
  color: #333333;
  box-sizing: border-box;
}
.bottom_center_bottom_list>li>a:hover{
  color: #ae1c1c;
}
.bottom_center_bottom_list>li>span{
  width: 25%;
  font-size: 12px;
  color: #999999;
  padding-left: 245px;
  position:relative;
  top: -21px;
  display: inline-block;
  /*这里用position会覆盖掉a标签，导致无法点击到*/
}

bottom_right内容构造

8133daf565d5499208d4c0c8768acbff.png

这一块内容就比较简单了，同样我们先搞出来色块样式设置好间距，再填充内容

 

f32121d66705776f06ffd044fb4d585f.png

 

/*bottom_right_bottom下的样式*/
.bottom_right_bottom{
    border: 1px solid #bdcadc;
    margin-top: 16px;
    height: 103px;
    width: 100%;
    background-color:#ffffff;
    float: right;
}
.bottom_right_bottom>.wxicon{
    float: left;
    height: 100px;
    width: 98px;
    background: url("../images/weixin.png") no-repeat 10px 30px;
}
.bottom_right_bottom>.wx_info{
    float: left;
    height: 100%;
    width: 173px;
}
.wx_info>.wx_name{padding-top: 20px;
    width: 173px;
    height: 48px;
}
.wx_info>.wx_name>p{
    font-size: 16px;
    color: #08995c;
}
.wx_info>.wxa{
    margin-top: -17px;
    width: 70px;
    height: 26px;
    background-color: #08995c;
}
.wx_info>.wxa>a{
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    padding-left: 14px;
    line-height: 26px;
}
<!--bottom_right_bottom下的样式-->
<div class="bottom_right_bottom">
  <div class="wxicon">

  </div>
  <div class="wx_info">
    <div class="wx_name">
      <p>@微信公众号</p>
    </div>
    <div class="wxa">
      <a href="#">+关注</a>
    </div>
  </div>
</div>

 

3.footer页脚设置

a7f72dc1bba68d7046f99179f9d97ce2.png

这一块就比较容易了，没有复杂的样式。我们按照常规操作，先构造出色块再补充内容即可

<!--设置版权信息栏目footer-->
<div class="footer">
    <div class="copy">
        <p>郑州师范学院 版权所有</p>
        <p>地址: 中国 河南 郑州惠济区英才街16号 邮编: 450044</p>
        <p>
            Copyright ©
            2023
            ZZNU. All Rights Reserved
        </p>
    </div>
    <div class="motto">
        <img src="./images/motto.png" alt="格言">
    </div>
</div>
/*设置footer页脚样式*/
.footer{
  float: right;
  width: 100%;
  height: 119px;
  margin-top: -30px;
  background: #e0e0e0;
  border-top: 1px solid #cccccc;
}
.footer>.copy{
  float: left;
  width: 600px;
  height: 70px;
  margin-top: 26px;
  margin-left: 133px;
}
.footer>.copy>p{
  padding-top: 5px;
  color: #666666;
  font-size: 12px;
}
.footer>.motto{
  float: left;
  width: 600px;
  height: 119px;
}
.footer>.motto>img{
  padding-top: 42px;
  padding-left: 306px;
}

 

完整代码和文件打包放到网盘：

链接：https://pan.baidu.com/s/1K16CDR1tzAy_XC4FFmvLTA?pwd=Aiyf 
提取码：Aiyf

zznu的小伙伴，请不要直接copy'哦，里面有两个隐藏的小bug哈哈哈哈

 

 

Aiyflowers
关注
PTA 7-46 请输出郑州轻工业大学OJ平台网址
higgins_li的博客
10-22 1327
PTA 7-46 请输出郑州轻工业大学OJ平台网址
学校官网制作
m0_65665796的博客
11-09 3110
校园官网
web前端html期末大作业实例 (1500套)
HTML网页设计
10-03 9万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
HTML做一个学校网站（纯html代码）
网页设计与制作
11-04 438
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 26万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
web前端——源码，大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS (1)
VX_WJ88950106的博客
04-18 4319
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS (1)
HTML网页设计
12-20 1022
文章目录📚web前端期末大作业 (1500套) 集合一、网页介绍二、网页集合三、作品演示A电影主题B漫画主题C商城主题D家乡主题E旅游主题F餐饮/美食主题G环境主题H游戏主题I 个人主题K体育主题L博客主题M汽车主题N文化主题P美妆主题Q企业主题R教育主题S其他主题🎁更多源码 📚web前端期末大作业 (1500套) 集合 临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？
2024web网页源码大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
weixin_BJ050106的博客
05-26 3898
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
Html基础
AlbertYang的博客
11-25 1761
网站信息页面 网站图片信息页面 网站友情链接页面 网站首页 网站注册页面 网站后台页面 教学导航 了解什么是标记语言 了解HTML主要特性，主要变化以及发展趋势 了解HTML的结构标签 掌握HTML的主要标签（字体，图片，列表，链接，表单等标签） 1.网站信息页面 1.1需求分析: 我们学校需要一个对外宣传的网站介绍,介绍学校的主要业务,学校的发展历史,学校的口号等等信息。 1.2技术分析: ...
郑州师范学院毕业论文规定(2).zip
09-20
【郑州师范学院毕业论文规定(2)】 毕业论文是高校教育的重要组成部分，旨在培养学生独立思考、解决问题和学术研究的能力。郑州师范学院的毕业论文规定详细规范了学生在撰写论文过程中的各个环节，确保了学术质量与...
郑州师范学院无线校园网解决方案.doc
10-03
【郑州师范学院无线校园网解决方案】 1 概述 无线校园网是现代教育信息化的重要组成部分，旨在为师生提供便捷、高效、安全的网络服务。郑州师范学院的无线校园网解决方案旨在满足教学、科研、管理和生活等多方面的...
郑州师范学院文学院网站管理规定.pdf
10-12
【郑州师范学院文学院网站管理规定】是学院对自身官方网站进行全面规范的一项重要文件，旨在确保网站的高效、安全运行，并发挥其在学院宣传、服务学生和教学科研中的作用。该规定依据多项国家法律法规和学校相关规定...
郑州大学网上学习导论期末考试答案.pdf
10-05
郑州大学网上学习导论期末考试答案.pdf
HTML 插件学习笔记
这里是齐尹秦的博客
04-02 448
HTML 插件的功能是扩展 HTML 浏览器的功能。辅助应用程序（helper application）也称为插件，它们可以被浏览器启动，用于播放音频、视频或其他功能。插件可以通过<object>标签或<embed>标签添加到页面中。然而，需要注意的是，大多数现代浏览器已经不再支持 Java 小程序和 Flash 插件。
html实现手势密码
weixin_68658847的博客
04-01 1374
html实现手势密码
html 给文本两端加虚线自适应
最新发布
小妖666个人笔记
04-05 211
html 给文本两端加虚线自适应
自动获取屏幕尺寸信息的html文件
lulei5153的博客
04-02 307
我们创建了一个占满整个视口（viewport）的div，背景颜色设置为浅蓝色，字体大小设置为2em，内容居中对齐。然后，我们使用JavaScript来获取这个div的实际宽度和高度，并实时显示在div中。当页面加载或窗口大小改变时，尺寸信息会自动更新。
Uni-app入门到精通：uni-app的基础组件
2301_82019265的博客
04-01 649
中本实例中，添加一个view组件，通过设置hover-class属性的值，实现点击该view组件，改变其背景颜色。navigator组件用于实现页面跳转，类似于HTML中<a></a>标签，但只能实现本地页面的跳转。view是容器组件，类似于HTML中的<div></div>标签，用于包裹各种元素内容，是页面布局常用的组件。在compony.vue文件中的视图层<template></template>里面添加以下代码。text组件用于包裹文本内容，类似于HTML中的<span></span>标签。
郑州HTML5培训课程培养前端开发精英
资源摘要信息: "郑州HTML5培训助力成为web前端开发大牛共3页.pdf" 该文件可能是一份关于HTML5培训课程的宣传资料或教学大纲，旨在帮助学习者通过学习HTML5相关知识，掌握web前端开发技能，最终成为web前端开发领域...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值