<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name= viewport content= width=device-width, initial-scale=1>
<title>ID Test </title>
<style>
div{
width: 50px;
height: 50px;
padding: 10px;
margin: 5px;
display: inline-block;
}
#red-color{
background-color: red;
}
#green-color{
background-color: green;
}
#blue-color{
background-color: blue;
}
</style>
</head>
<body>
<div id="red-color"></div>
<div id="green-color"></div>
<div id="blue-color"></div>
</body>
</html>
1 Like
Perfect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
display: inline-block;
width: 250px;
height: 300px;
margin: 10px;
}
#red{
background-color: red;
}
#green {
background-color: green;
}
#blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="red" ></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
1 Like
ممتاز
ممتاز، أرجوا وضع الأكواد مباشرة بدون وضع صور للمحرر
هنا مرجع لكيفية القيام بذلك:
1 Like
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>STORE</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
div {
width: 100px;
height: 100px;
margin: 20px;
display: inline-block;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
1 Like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
div{
display:inline-block;
width:200px;
height:200px;
margin:10px;
}
#color-red{
background-color:red;
}
#color-green{
background-color:green;
}
#color-blue{
background-color:blue;
}
</style>
</head>
<body>
<div id="color-red"></div>
<div id="color-green"></div>
<div id="color-blue"></div>
</body>
</html>
1 Like
ممتاز أنس
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Attribute ID</title>
</head>
<style>
div{
display: inline-block;
width: 150px;
height: 150px;
}
#red{
background-color: red;
}
#green{
background-color: green;
}
#blue{
background-color: blue;
}
</style>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
2 Likes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
}
#red-box{
background-color: red;
}
#green-box{
background-color: green;
}
#blue-box{
background-color: blue;
}
</style>
</head>
<body>
<div id="red-box"></div>
<div id="green-box"></div>
<div id="blue-box"></div>
</body>
</html>
2 Likes
مهمة التدرب على الـ ID
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
</head>
<style>
div{
display: inline-block;
width: 200px;
height: 200px;
margin: 30px;
}
#Red_Color{
background-color: red;
}
#Green_Color{
background-color: green;
}
#Blue_Color{
background-color: blue;
}
</style>
<body>
<div id="Red_Color"></div>
<div id="Green_Color"></div>
<div id="Blue_Color"></div>
</body>
</html>
2 Likes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rectangles</title>
<style>
div {
width: 200px;
height: 200px;
margin: 20px;
display: inline-block;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
2 Likes
مهمة التدرب على الـ ID :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
div{
width: 150px;
height: 150px;
margin: 10px;
display: inline-block;
}
#red{
background-color: red;
}
#green{
background-color: green;
}
#blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
2 Likes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#kk{background-color:red;width:90px;height:90px;display:inline-block;margin-right: 20px;}
#kd{background-color:green;width:90px;height:90px;display: inline-block;margin-right:20px;}
#dk{background-color:blue;width:90px;height: 90px;display: inline-block;margin-right:20px;}
</style>
<title>Document</title>
</head>
<body>
<div id="kk"></div>
<div id= "kd"></div>
<div id ="dk"></div>
</body>
</html>
2 Likes
جيد ولكن انتبه لا داعي لتكرار كلا من width, height and display مع كل div وكلهم نفس الشيء
يمكنك عمل ذلك
div{
display: inline-block;
width: 150px;
height: 150px;
}
2 Likes
شكرا
2 Likes
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>task</title>
<style>
div{
display: inline-block;
width: 150px;
height: 150px;
margin: 35px;
}
#box-one{
background-color: red;
}
#box-two{
background-color: green;
}
#box-three{
background-color: blue;
}
</style>
</head>
<body>
<div id="box-one"></div>
<div id="box-two"></div>
<div id="box-three"></div>
</body>
</html>
2 Likes