练习 | CSS定位基本练习

最新推荐文章于 2024-07-24 11:19:07 发布

虎鲸一号

最新推荐文章于 2024-07-24 11:19:07 发布

阅读量1.4k

点赞数 2

分类专栏： CSS 学习记录 Web

本文链接：https://blog.csdn.net/qq_44537414/article/details/104158542

版权

本文介绍了两个CSS练习，包括实现淘宝主页的工具盒框架结构，使用div盒子模型和定位属性；以及绘制左上角三角形图形，通过CSS技巧完成。在工具盒实现中，存在屏幕适应性和元素对齐问题，通过相对定位解决。

摘要由CSDN通过智能技术生成

文章目录

- - - 题1：实现淘宝主页的工具盒框架结构
    - 题2：绘制图形（左上方三角形）

题1：实现淘宝主页的工具盒框架结构

1 . 使用div盒子模型中的border,margin,padding和position属性,实现淘宝主页的工具盒框架结构
实心框都是图片对象；边线框为文本对象；
在这里插入图片描述

解
效果图（iPone 6/7/8 Plus 屏幕尺寸下）
在这里插入图片描述
存在的问题
1.适应屏幕变化能力差
大部分元素的大小是写死的
2.图标边缘不对齐
浏览器直接预览会有比较明显的观感

出现过的问题
在调整下方服务的组合元素位置时，使用display: inline-block;后，显示的位置有点奇怪（如图），当时只对橙色区及外部框的大小重新设置，其余样式同同组样式。
没有参悟出原因。之后通过相对定位调整位置。
在这里插入图片描述

index.html
类名命名参照 CSS | 命名规范小记
题中说明了实心框都是图片对象，在这使用了<div>代替

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>EX04</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
	<div class="g-index">
	  <div class="g-hd">
      <div class="m-nav">
        <div class="u-title z-active">公告</div>
        <div class="u-title">规则</div>
        <div class="u-title">论坛</div>
        <div class="u-title">安全</div>
        <div class="u-title">公益</div>
      </div> 
    </div>
		<div class="g-bd">
      <div class="m-info">
        <p class="u-text"></p>
        <p class="u-text"></p>
      </div> 
      <div class="m-login">
        <d