总算可知道网页CSS和基本框架编写模式,通过Replit给文章加框架

复盘最近学了一些网站制作程序开发的知识,可以说一个网站内容可以看到的大部分内容,经过了网页的基础结构、内容修改,还有与Java代码有关的编写。多个结构嵌套,运行时候的script纠错,也都是给网站看起来像一个界面还不错,不过仔细看过CSS觉得好的开发应是人性化的。具体说来,排版应该有不同级的标题,字体和边框都相应的设置好。

进行这个项目从replit.com 开始,

HTML, CSS, JS 的index.html 实战,基本上从页面布局来知道程序的基本框架就从 !DOCTYPE html 到完成一个style.css 之后形成网页内容。内容既包括了标题 <h1> <h2> <h3>,内容也有具体的<p> 随意发挥</p>,得到了一个menu.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <!-- HTML is visible to users goes inside of body-->
  <h1>Mooncake Connections </h1>
  <h2>A page for five plums stuffing for the mooncake, add fresh ice layer to gather</h2>
  <p> wow cookies, I prefer cookies and delicious mooncakes share with you.
          <p>Type 1: Salty Caremel Cookies </p>
          <p>Type 2: Egg Yoggi Nut Cookies </p>
          <p>Type 3: Su Style Mooncakes </p>
          <p>Type 4: Chocolate Mooncakes </p>
  </p>

        <body>

然后各类段落CSS Reference 可参考以下https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index

比如background 可以选择颜色、透明度、位置等;background - position, attachment etc.

       border 是对文本框的一些内容定义

       Contain 可以对context 内容的修饰加以调整。

就好像一个Word文本框从外框到内部的填充和文字的layout都可以局部调整。

<img>scr="https://en.wikipedia.org/wiki/Mooncake#/media/File:Mooncake_3-4,_lotus_seed_paste.jpg" alt
</img>
  <a href="https://https://pixabay.com/zh/photos/donkey-desert-siwa-egypt-oasis-8575524/"></a>
  <!--Colleen's proposal: can be an image made into a link? -->

  <script src="script.js"></script>
  <link rel ="stylesheet" href = "/style.css">
 
</body>

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值