老师，想问问半圆怎么实现的，能不能演示一下
来源：4-4 自由编程
慕雪9296518
2020-06-16 19:30:41
<!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 rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/fhomeworkindex.css">
</head>
<body>
<header class="header_container">
<div class="row">
<div class="header_container_btn col-4 col-offset-1 d-md-none">
<button type="button" class="btn_toggle" id="btn_toggle">
<span class="btn_toggle_bar"></span>
<span class="btn_toggle_bar"></span>
<span class="btn_toggle_bar"></span>
</button>
</div>
<div class="header_container_nav col-4 d-none d-md-block col-md-offset-1">
<ul class="header_nav">
<li class="header_nav_item"><a href="###" class="header_nav_link">首页</a></li>
<li class="header_nav_item"><a href="###" class="header_nav_link">关于</a></li>
<li class="header_nav_item"><a href="###" class="header_nav_link">商业合作</a></li>
</ul>
</div>
<div class="header_container_logo col-7">
<a href="###" class="header_logo"><img src="img/logo.png" alt="logo"></a>
</div>
</div>
</header>
<nav class="nav_container d-md-none" id="nav">
<ul class="container">
<li><a href="###" class="nav_link">手机&平板</a></li>
<li><a href="###" class="nav_link">电视&影音</a></li>
<li><a href="###" class="nav_link">生活家电</a></li>
<li><a href="###" class="nav_link">电脑/办公/储存</a></li>
<li><a href="###" class="nav_link">网上商城</a></li>
</ul>
</nav>
<script>
var nav = document.getElementById('nav');
var navactivestate = 'nav_container_extended';
window.onresize = function(){
if(window.innerWidth >= 768){
nav.classList.remove(navactivestate)
}
}
document.getElementById('btn_toggle').onclick = function(){
if(nav.classList.contains(navactivestate)){
nav.classList.remove(navactivestate)
}else{nav.classList.add(navactivestate)}
}
</script>
</body>
</html>
1回答
-
好帮手慕久久
2020-06-17
同学你好，“1/4圆”可以使用边框圆角实现，如下：
由于样式没有粘贴完整，所以老师无法检查代码是否正确，建议将代码粘贴完整。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题